title: Angular 4 dynamic headers based on user type
body: <p>I'm trying to implement a dynamic header component which changes based on user role.</p>
  
  <p>Here is my header component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent implements OnInit {
      currentUser:any;
    constructor(
  
    ) {
       this.currentUser = JSON.parse(localStorage.getItem('currentUser')); 
  
    }
  
    ngOnInit() {
  
    }
  
  }
  </code></pre>
  
  <p>This is my header template</p>
  
  <pre><code>&lt;nav class="navbar navbar-default" &gt;
   &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
    &lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li class="menu_item" *ngIf="!currentUser"&gt;&lt;a [routerLink]="['/login']"&gt; Login &lt;/a&gt;&lt;/li&gt;
      &lt;li class="menu_item" *ngIf="currentUser"&gt;&lt;a [routerLink]="['/signin']"&gt;Logout&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>But the problem is </p>
  
  <ul>
  <li>after logged in, that header text is not changing ( not changing
  login -> logout )</li>
  <li>after logout, that header text is not changing ( not changing
  logout -> login )</li>
  <li>But it change the header text if I refresh the page. But not changing automatically with the route change</li>
  </ul>
  
  <p>Can anyone help me on this ?</p>