title: AngularFire auth, template not updated when Observable<User> changes
body: <p>I am a casual user of Angular so maybe I'm missing something obvious.</p>
  
  <p>I followed <a href="https://fireship.io/lessons/angularfire-google-oauth/" rel="nofollow noreferrer">this lesson</a> from fireship.io to integrate authentication in my angular app using angularfire.</p>
  
  <p>After signing in, the observable AuthService.user$ changes, but the template doesn't update in the UserProfile component.</p>
  
  <p>Using the code snippet below confirms that the data is there.</p>
  
  <pre><code>&lt;pre&gt;{{auth.user$ | async | json}}&lt;/pre&gt;
  </code></pre>
  
  <p>This seems to have something to do with the observable being updated outside of the ngzone.
  I tried to manually detect changes by injecting ChangeDetectorRef in the component and triggering detectChange from a subscribe callback of the AuthService.user$, without success.</p>
  
  <p>I only managed to make it work as expected by changing user-profile.component.ts to the following:</p>
  
  <pre><code>@Component({
    selector: 'app-user-profile',
    templateUrl: './user-profile.component.html',
    styleUrls: ['./user-profile.component.css']
  })
  export class UserProfileComponent implements OnInit {
  
    userData?: User;
  
    constructor(public auth: AuthService) {
      this.auth.user$.subscribe(d =&gt; this.userData = d)
    }
  }
  </code></pre>
  
  <p>And user-profile.component.html to the following:</p>
  
  <pre><code>&lt;div *ngIf="userData; then authenticated else guest"&gt;
  &lt;/div&gt;
  
  &lt;ng-template #guest&gt;
    &lt;h3&gt;Hello&lt;/h3&gt;
    &lt;p&gt;Login to get started...&lt;/p&gt;
  
    &lt;button (click)="auth.googleLogin()"&gt;
      &lt;i class="fa fa-google"&gt;&lt;/i&gt; Connect Google
    &lt;/button&gt;
  &lt;/ng-template&gt;
  
  &lt;ng-template #authenticated&gt;
    &lt;div *ngIf="userData as user"&gt;
      &lt;h3&gt;Hello, {{ user.displayName }}&lt;/h3&gt;
      &lt;img [src]="user.photoURL"&gt;
      &lt;button (click)="auth.signOut()"&gt;Logout&lt;/button&gt;
    &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>Here are my dependencies, extracted from package.json.</p>
  
  <pre><code>{
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/fire": "^5.4.0",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "firebase": "^7.8.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  }
  </code></pre>
  
  <p>Any idea of what I might be missing?</p>