Problemwithangularindynamicallybindinghtmlelements

• I have an angular app as frontend and laravel as a backend. For login page I would hide a certain elements from a dashboard. I would hide those elements by checking whether the user is authenticated. If they are authenticated i would show the html elements.
• Problem is the user is navigated to the component but the html elements which are in header component doesn't show any changes in browser.
• but if I refresh the page the header elements are showing, where i am missing does anyone know.

• I have checked whether the user is authenticated like this in header component

• Typescript:

  ngOnInit() {
   this.isAuth = this.authService.isAuth();
   console.log(this.isAuth);
   if(this.isAuth){
    this.userDetails = JSON.parse(this.authService.getUserDetails());
    console.log(this.userDetails);
   }
  }
  

• Html:

  <div *ngIf="isAuth" class="collapse navbar-collapse" id="navbar-mobile">

As I am new to angular, it would be helpful if you can tell where I am missing.