title: Angular2 ngIf not updating DOM?
body: <p>I can't seem to find the correct expression for ngIf to evaluate correctly.</p>
  
  <p>I followed the simple <a href="https://github.com/angular/angularfire2/blob/master/docs/5-user-authentication.md" rel="nofollow noreferrer">Angularfire2 example here</a>, and it lets me log in and log out correctly.</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { AngularFire } from 'angularfire2';
  
  @Component({
    selector: 'app-root',
    template: `
    &lt;div&gt; {{ (af.auth | async)?.uid }} &lt;/div&gt;
    &lt;button (click)="login()"&gt;Login&lt;/button&gt;
    &lt;button (click)="logout()"&gt;Logout&lt;/button&gt;
    `,
  })
  export class AppComponent {
    constructor(public af: AngularFire) {
      this.af.auth.subscribe(auth =&gt; console.log(auth));
    }
  
    login() {
      this.af.auth.login();
    }
  
    logout() {
       this.af.auth.logout();
    }
  }
  </code></pre>
  
  <p>I want to modify the code to show/hide the correct buttons depending upon the logged in state. I can see in the console that auth is switching from null to object and back, but the DOM isn't updating.</p>
  
  <p>Here is the latest attempt:</p>
  
  <pre><code>&lt;div&gt; {{ (af.auth | async)?.uid }} &lt;/div&gt;
  &lt;button *ngIf="!(auth | async)" (click)="login()"&gt;Login&lt;/button&gt;
  &lt;button *ngIf="auth | async" (click)="logout()"&gt;Logout&lt;/button&gt;
  </code></pre>
  
  <p>What am I doing wrong? How can I get this to evaluate correctly?</p>