Angular component not updating when value changed

Question

I'm having a bit of trouble getting an ngIf to update when one of my variables changes.

I have an ionic (angular) app that has user authentication. When the app loads it should hide the navigation menu and display only a login view if the user is logged out. When the user is logged in the app should display a loading screen while the user's data is being retrieved from the server and then show the appropriate view and display the navigation menu. I cannot get the navigation menu to display. I think it has something to do with the code that changes isLoggedIn running after the view has finished rendering, but I'm not certain as any attempts to force a re-render have yielded no changes

export class AppComponent {

    public user: User
    public isLoggedIn = false;
    
  public appPages = [
    { title: 'Home', url: '/assignment', icon: 'home', role: 'Employee'},
    { title: 'Home', url: '/supervisor', icon: 'home', role: 'Supervisor'},
    { title: 'Assignments', url: '/assign', icon: 'body', role: 'Supervisor'},
    { title: 'Manager', url: '/manager', icon: 'briefcase', role: 'Supervisor'},
    { title: 'Settings', url: '/settings', icon: 'settings', role: 'any'}
  ];
  constructor(private router: Router, private auth: Auth, private userService: UserService) {
    this.router.navigate(["/loader"]);
    this.authorise();
  }
  
  authorise(){
      if(localStorage.getItem("uid")){
        console.log("user Is Logged In: Getting data");
        this.userService.getUser(localStorage.getItem("uid")).subscribe(res => {
            console.log("assigning user")
            console.log(res);
            this.user = res
            this.checkRole();   
        });
    }else{
        this.router.navigate(["/login"])
    }

  }
  
  checkRole(){
  console.log("checking....");
    if(this.user.role == "Employee"){
         this.isLoggedIn = true;
        this.router.navigate(["/assignment"]);
    }else{
        this.isLoggedIn = true;
        this.router.navigate(["/supervisor"]);  
    }
  }

}```

My template File (just the relevant part)

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay" *ngIf="isLoggedIn">
      <ion-content>
        <ion-list id="menu-list">
        ..........

As you can see, When the app loads, isLoggedIn is false, forcing the ion-menu to not be rendered.

The script constructor then calls authorise and asynchronously retrieves the user's file from a Firestore database. Once that data is retrieved it calls checkRole and loads the appropriate page in a router-outlet (not included in this example). once the user's role is established checkRole set's isLoggedin to true which is where I want the template to start displaying the menu bar.

does anyone know how to make this happen?

thanks:)

Answer 1

do someting like:

import { MenuController } from '@ionic/angular'; // import menu controller


constructor(private menu: MenuController) { 
  this.menu.enable(false); // make your menu hidden by default.
}

// inside your checkRole Function enable your menu.
checkRole(){
    if(this.user.role == "Employee"){
      //this.isLoggedIn = true;
      this.menu.enable(true);
      this.router.navigate(["/assignment"]);
    }else{
      //this.isLoggedIn = true;
      this.menu.enable(true);
      this.router.navigate(["/supervisor"]);  
    }
 }