[Angular] Design API for show / hide components based on Auth

Simple Auth service:

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {User} from '../model/user';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import 'rxjs/add/operator/map';

export const ANONYMOUS_USER: User = {
id: undefined,
email: ''
};

@Injectable()
export class AuthService {

subject = new BehaviorSubject<User>(ANONYMOUS_USER);
user$: Observable<User> = this.subject.asObservable();
isLoggedIn$: Observable<boolean> = this.user$.map(user => !!user.id);
isLoggedOut$: Observable<boolean> = this.isLoggedIn$.map(isLoggedIn => !isLoggedIn);

constructor(private http: HttpClient) { }

signUp(email: string, password: string) {

}

}

Using Observable is a easy way to implement reactive application.

Create a BehaviorSubject and then convert subject to Observable. BehaviorSubject also takes a init param.

The isLoggedIn$ & isLoggedOut$ based on user$.

The in the component, we inject the auth service:

import {Component, OnInit} from '@angular/core';
import {AuthService} from './services/auth.service';
import {Observable} from 'rxjs/Observable';
import {User} from './model/user';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

user$: Observable<User>;
isLoggedIn$: Observable<boolean>;
isLoggedOut$: Observable<boolean>;

constructor(private auth: AuthService) {

}

ngOnInit() {
this.user$ = this.auth.user$;
this.isLoggedIn$ = this.auth.isLoggedIn$;
this.isLoggedOut$ = this.auth.isLoggedOut$;
}
}

HTML:

<li *ngIf="isLoggedOut$ | async">
<a routerLink="/signup">Sign Up</a>
</li>
<li *ngIf="isLoggedOut$ | async">
<a routerLink="/login">Login</a>
</li>
<li *ngIf="isLoggedIn$ | async">
<a >Logout</a>
</li>