title: Change content of NavBar in Angular based on ngIf condition
body: <p>I am a beginner in Angular and Node JS. I am trying a simple navigation bar change based on ngIf condition. However, it doesn't seem to work.</p>
  
  <p>I have already tried it using static member variables. </p>
  
  <p>Also, tried creating a method which changes the value of <code>isUserAuthenticated</code> in <code>navbar.component</code> and called the methods in <code>homepage.component</code> as well as <code>dashboard.component</code>. </p>
  
  <p>I have also done <code>console.log()</code> and checked the value of <code>isUserAuthenticated</code> variable. It is being updated on both the <code>homepage.component</code> as well as <code>dashboard.component</code>. However, the NavBar always remains the same.</p>
  
  <p>I have changed the value directly in navbar.component and then it works. So, I am wandering why it is not working if I change the value from other components.</p>
  
  <p>navbar.component.html</p>
  
  <pre><code>       &lt;div *ngIf="!isUserAuthenticated"&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="/"&gt; EX FALSE &lt;/a&gt;
            &lt;/li&gt;
          &lt;/div&gt;
  
          &lt;div *ngIf="isUserAuthenticated"&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="/"&gt; EX TRUE &lt;/a&gt;
            &lt;/li&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>navbar.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
  })
  export class NavbarComponent implements OnInit {
  
    isUserAuthenticated = true;
  
    constructor() { }
  
    ngOnInit() { }
  
    public authenticate() {
      this.isUserAuthenticated = false;
      return  this.isUserAuthenticated;
    }
    public deauthenticate() {
      this.isUserAuthenticated = true;
      return  this.isUserAuthenticated;
    }
  }
  </code></pre>
  
  <p>homepage.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { NavbarComponent } from '../navbar/navbar.component';
  
  
  @Component({
    selector: 'app-homepage',
    templateUrl: './homepage.component.html',
    styleUrls: ['./homepage.component.css']
  })
  export class HomepageComponent implements OnInit {
  
    constructor( ) {
  
    }
  
    ngOnInit() {
  
      console.log("here");
      this.deauthenticate();
  
  
    }
  
    public deauthenticate()
    {
      const comp2 = new NavbarComponent();
      comp2.deauthenticate();
      console.log(comp2.deauthenticate());
    }
  }
  </code></pre>
  
  <p>dashboard.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { NavbarComponent } from '../navbar/navbar.component';
  
  
  
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
  })
  export class DashboardComponent implements OnInit {
  
    constructor( ) {
    }
  
    ngOnInit() {
  
      this.authenticate();
    }
  
    public authenticate()
    {
      const comp2 = new NavbarComponent();
      comp2.authenticate();
      console.log(comp2.authenticate());
    }
  
  }
  </code></pre>
  
  <p>I want that <code>dashboard</code> component shows "EX TRUE" in NavBar and <code>homepage</code> component shows "EX FALSE" in NavBar.</p>