title: Angular 4 constructor value used on *ngIf
body: <p>In the following typescript code I have a value <code>moreinfo</code> which I initialize to 1. After that inside the constructor I change the value to 2. So with value 1 I display one <code>div</code> with <code>*ngIf</code> and with value 2 I display a different <code>div</code>. All works perfectly and I see that the value has correctly changed to 2 from console.    </p>
  
  <pre class="lang-js prettyprint-override"><code>export class LoginComponent implements OnInit {
    moreinfo: number=1;
    email: string;
    password: string;
  
    constructor(public afAuth: AngularFireAuth, public af: 
      AngularFireDatabase,public authService: AuthService) {
  
      firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          this.moreinfo=2;
          var user2 = firebase.auth().currentUser;
          console.log("Current user id:" + user2.uid + "\nMoreinfo:" + this.moreinfo);
        } else {
          console.log("No user is signed in."); 
        }
      });
    }
  }
  </code></pre>
  
  <p>However when I compare the value in the HTML it displays the <code>div</code> with <code>morevalue == 1;</code> despite the fact that the value has changed to 2. Is there anyone that can shed some light on my problem?   </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container" *ngIf="moreinfo == 1"&gt;
    &lt;h1 *ngIf="authService.user | async"&gt;Welcome {{ (authService.user | async)?.email }}!&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="container" *ngIf="moreinfo == 2"&gt;
    something
  &lt;/div&gt;
  </code></pre>