title: Hide the login button after logged in and vice versa
body: <p>This is my component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import { AngularFireAuth } from 'angularfire2/auth';
  import * as firebase from 'firebase/app'
  import {Router} from "@angular/router";
  
  @Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
  })
  export class NavbarComponent implements OnInit {
  
    user: Observable&lt;firebase.User&gt;;
  
    constructor(
      public afAuth: AngularFireAuth,
      private router:Router) { 
       this.user = afAuth.authState;
    }
  
    ngOnInit() {
    }
    login(){
      this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
    }
    logout(){
      debugger;
      this.afAuth.auth.signOut();
      this.router.navigate(['/']);
      console.log(this.afAuth);
    }
  
  }
  </code></pre>
  
  <p>My html view part of login and log out is here</p>
  
  <pre><code>&lt;ul class="list-inline nav navbar-nav navbar-right"&gt;
  
               &lt;li class="list-inline-item" ngIf="!(afAuth.auth| async)"&gt;&lt;a (click)="login()" style="color:red;"&gt;Login&lt;/a&gt;&lt;/li&gt;
               &lt;li class="list-inline-item" ngIf="(afAuth.auth| async)"&gt;&lt;a (click)="logout()" style="color:red;"&gt;Logout&lt;/a&gt;&lt;/li&gt;
  
           &lt;/ul&gt;
  </code></pre>
  
  <p>I want to hide login button after logged in, and also when log out i want to show login,But its not working.</p>
  
  <p>The error is</p>
  
  <pre><code>ERROR Error: No provider for TemplateRef!
      at injectionError (core.es5.js:1231)
      at noProviderError (core.es5.js:1269)
      at ReflectiveInjector_._throwOrNull (core.es5.js:2770)
      at ReflectiveInjector_._getByKeyDefault (core.es5.js:2809)
      at ReflectiveInjector_._getByKey (core.es5.js:2741)
      at ReflectiveInjector_.get (core.es5.js:2610)
      at AppModuleInjector.NgModuleInjector.get (core.es5.js:3578)
      at resolveDep (core.es5.js:11039)
      at createClass (core.es5.js:10895)
      at createDirectiveInstance (core.es5.js:10723)
  </code></pre>
  
  <p>Please help me to find the answer</p>