Hide button when logged in and show other buttons when not logged in

Question

In my Angular 8 application I am trying to update a dropdown menu with 2 buttons being shown when not logged in and 1 button being shown when logged in (Sign In and Register for when not logged in and Sign Out when logged in). I am unable to get that functionality working.

I've tried doing the following:

1. Changing authService.afAuth.auth to authService.user (Didn't do anything)
2. Changing (authService.afAuth.auth | async) to authService.afAuth.auth == true and authService.afAuth.auth == false (Didn't do anything)
3. Changing the location of the buttons (to outside of the toolbar - didn't work)

Here are several snippets of files - not sure where to start looking for the root issue.

Mat-menu section of the header.component.html

<mat-menu #account="matMenu">
    <button mat-menu-item routerLink="/sign-in" *ngIf="authService.isLoggedIn == true">Log In</button>
    <button *ngIf="authService.isLoggedIn == true" mat-menu-item routerLink="/register">Register</button>
    <button *ngIf="authService.isLoggedIn == false" mat-menu-item routerLink="/signout">Sign Out</button>
</mat-menu>

button (still inside of the header.component.html) that opens the dropdown

<button mat-button [matMenuTriggerFor]="account">Account Management</button>

Sign out component .ts file (the one where the sign-out section is redirected - not sure if it is just an issue of not being signed out properly)

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/shared/services/auth.service';

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

  constructor(
    public authService: AuthService
  ) { }

  ngOnInit() {
  }

}

Here is the signout.component.html file

<div class="center">
    <h3>Sign Out</h3>
    <button mat-button (click)="authService.SignOut()">Confirm Sign Out</button>
</div>

Here are some sections of the auth.service.ts file

constructor(
    public afs: AngularFirestore,   // Inject Firestore service
    public afAuth: AngularFireAuth, // Inject Firebase auth service
    public router: Router,  
    public ngZone: NgZone // NgZone service to remove outside scope warning
  ) {    
    /* Saving user data in localstorage when 
    logged in and setting up null when logged out */
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.userData = user;
        localStorage.setItem('user', JSON.stringify(this.userData));
        JSON.parse(localStorage.getItem('user'));
      } else {
        localStorage.setItem('user', null);
        JSON.parse(localStorage.getItem('user'));
      }
    })
  }

...

get isLoggedIn(): boolean {
    const user = JSON.parse(localStorage.getItem('user'));
    return (user !== null && user.emailVerified !== false) ? true : false;
  }

...

SignOut() {
    return this.afAuth.auth.signOut().then(() => {
      localStorage.removeItem('user');
      this.router.navigate(['home']);
    })
  }

Expected Results: The user is logged out and the sign in and register button show up and the sign out button goes away.

Actual Results: It either: A. Does not sign-out the user and in that case, then it is an auth.service.ts problem B. Does not detect the change of the user being signed out even after a refresh

I do not get any error in the console.

Answer 1

As @sagat said in the comments the header.component.ts needed to be updated from this:

<mat-menu #account="matMenu">
    <button mat-menu-item routerLink="/sign-in" *ngIf="authService.isLoggedIn == true">Log In</button>
    <button *ngIf="authService.isLoggedIn == true" mat-menu-item routerLink="/register">Register</button>
    <button *ngIf="authService.isLoggedIn == false" mat-menu-item routerLink="/signout">Sign Out</button>
</mat-menu>

to this (False on signout was changed to true and true on login and register were changed to false)

<mat-menu #account="matMenu">
    <button mat-menu-item routerLink="/sign-in" *ngIf="authService.isLoggedIn == false">Log In</button>
    <button *ngIf="authService.isLoggedIn == false" mat-menu-item routerLink="/register">Register</button>
    <button *ngIf="authService.isLoggedIn == true" mat-menu-item routerLink="/signout">Sign Out</button>
</mat-menu>