title: NgIf not updating when variable changes
body: <p>Right, so i have a header component (navbar) which contains the following template:</p>
  
  <pre><code>&lt;ng-template [ngIf] = "authService.isAuthenticated()"&gt;
    &lt;li&gt;
      &lt;a routerLink="Landing" class="navbar-brand" (click)="Logout()"&gt;&lt;span class="xvrfont"&gt;Logout&lt;/span&gt;&lt;i class="fa fa-sign-in" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a routerLink="Profile" class="navbar-brand"&gt;&lt;span class="xvrfont"&gt;{{authService.getUsername()}}&lt;/span&gt;&lt;i class="fa fa-user-circle" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>This part of the nav should be visible when the user is authenticated. to find out it checks via authService.</p>
  
  <p>To check if a user is authenticated, the following code is ran on every route change:</p>
  
  <pre><code>checkAuthenticated(){
     if  (localStorage.getItem('token') != null){ this.authenticated = true; }
     else { this.authenticated = false; }
     console.log(this.authenticated); // for Debugging. 
  }
  </code></pre>
  
  <p>The NgIf statement calls this method: </p>
  
  <pre><code>public isAuthenticated(){
       return this.authenticated;
  }
  </code></pre>
  
  <p>According to the logs, 'authenticated' <strong>is</strong> changing between true and false correctly, but the Ngif isn't responding to the changes somehow.</p>
  
  <p>the header component.ts looks like this: </p>
  
  <pre><code>import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  import {AuthService} from "../auth/auth.service";
  
  @Component({
    selector: 'app-header',
    providers: [AuthService],
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css'],
    encapsulation: ViewEncapsulation.None
  })
  export class HeaderComponent implements OnInit {
  
    constructor(private authService: AuthService) { }
  
    ngOnInit() {
    }
  
    Logout(){
      this.authService.Logout();
    }
  
  }
  </code></pre>
  
  <p>Any help would be appreciated. Thanks.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>auth.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {HttpClient, HttpHeaders} from '@angular/common/http';
  import {Router} from "@angular/router";
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class AuthService {
  
    public apiroot = 'http://localhost:3100/';
    public loginResponseMessage = '';
    public registerResponseMessage = '';
    public authenticated = false;
  
  
    public constructor(private http: HttpClient,
                       private router: Router) {
  
    }
  
  
  
    SignUp(username: string, password: string) {
      const User = JSON.stringify({username: username, password: password});
      let response: any;
      this.http.post(this.apiroot + 'register', User, {headers: new HttpHeaders()
        .set('content-type', 'application/json; charset=utf-8')})
        .subscribe(res =&gt; {
          response = res;
          this.registerResponseMessage = response.message;
          console.log(this.registerResponseMessage);
        });
    }
  
    Login(username: string, password: string) {
      const User = JSON.stringify({username: username, password: password});
      let response: any;
      this.http.post(this.apiroot + 'authenticate', User, {headers: new HttpHeaders()
        .set('content-type', 'application/json; charset=utf-8')})
        .subscribe(res =&gt; {
          response = res;
          this.loginResponseMessage = response.message;
          if (response.token) {
            localStorage.setItem('token', response.token);
            this.authenticated = true;
            localStorage.setItem('user', response.username);
            this.router.navigate(['/']);
          }
          else{  /* Do Nothing */  }
        });
    }
  
  
    Logout(): void{
      this.authenticated = false;
      localStorage.removeItem('token');
      console.log(this.isAuthenticated());
      this.router.navigate(['/Landing']);
    }
  
    isAuthenticated(){
      return this.authenticated;
    }
  
    checkAuthenticated(){
      if  (localStorage.getItem('token') != null){ this.authenticated = true; }
      else { this.authenticated = false; }
      console.log(this.authenticated); // for Debugging.
    }
  
  
  
    getUsername(){
      var result = localStorage.getItem('user');
      return result;
    }
  }
  </code></pre>