What I did was:
1 - Create an Auth Service that is responsable for set a variable that represents the auth status.
2 - Set the auth status variable to an Observation one;
3 - On the header component you can subscribe to this auth service variable observer and then change the header mode based on the auth variable status.
For example:
auth.service.ts
Ps. Notice the localStorage.getItem('authState') when declaring the authStateSubject. This way you can get the current state of the user.
...
@Injectable()
export class AuthService {
// you can get the actual state from memory here
private authStateSubject: BehaviorSubject<Boolean> = new BehaviorSubject<Boolean>(localStorage.getItem('authState'));
state: Observable<Boolean> = this.authStateSubject.asObservable();
...
header.component.ts
...
@Component({
...
})
export class SidenavLeftComponent {
isUserLoggedIn: boolean;
constructor(private authService: AuthService) {
...
}
ngOnInit(){
// update auth status when it changes
this.authService.state.subscribe(state => this.isUserLoggedIn = state);
}
}
...
header.component.html
...
<li *ngIf="!isUserLoggedIn"><a href="#">Log in</a></li>
<li *ngIf="isUserLoggedIn"><a href="#">Log out</a></li>
<li *ngIf="!isUserLoggedIn"><a href="#">Register</a></li>
...
When the user logs in, you call this method in the auth.service.ts
this.authStateSubject.next(true);
When the user logs out, you call this method in the auth.service.ts
this.authStateSubject.next(false);
That way, all subscribers will notice the new value and act over it.
