title: *ngIf does not react to boolean change
body: <p>Here are some pieces of code. This same pattern (afaik) works for the hero tutorial.</p>
  
  <p><strong>login.component.html:</strong></p>
  
  <pre><code>&lt;div class="four wide column middle aligned" *ngIf="wrongCredentialsInserted"&gt;
       &lt;div class="ui error message"&gt;Invalid credentials
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>login.component.ts:</strong></p>
  
  <pre><code>wrongCredentialsInserted: boolean = false;
  
  //...      
  
  onSubmit(login: LoginDto): void {
          console.log(`User '${login.username}' attempts to login...`);
          if (this.authService.login(login.username, login.password)) {
            this.location.back();
          } else {
            this.wrongCredentialsInserted = true; //This line gets executed!
          }
        }
  </code></pre>
  
  <p>The message doesn't get displayed, even though I set <code>wrongCredentialsInserted</code> to true. It gets set to true, I already validated that. I also tried things like <code>*ngIf="wrongCredentialsInserted === true"</code>, because I read that somewhere else, but it didn't work.
  I read that this could be related to "one way dataflow, starting with Angular 2", but I know that we were able to do such things in A2+ projects in our company. AFAIK one way databinding only refers to component-component communication.</p>
  
  <p>Any kind of help is highly appreciated.</p>
  
  <p><strong>EDIT:</strong> Since there seems to be a bit of confusion with the things I did, I post the whole files here.</p>
  
  <p><strong>login.component.ts</strong></p>
  
  <pre><code>import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
  import {routerTransition} from '../../router.transition';
  import {Component} from '@angular/core';
  import {AuthService} from '../auth.service';
  import {LoginDto} from './login-dto';
  import {Location} from '@angular/common';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
    animations: [routerTransition()]
  })
  export class LoginComponent {
  
    private readonly USERNAME: string = 'username';
    private readonly PASSWORD: string = 'password';
  
    myForm: FormGroup;
    username: AbstractControl;
    password: AbstractControl;
  
    message: string;
    wrongCredentialsInserted = false;
  
    constructor(public fb: FormBuilder,
                public authService: AuthService,
                public location: Location) {
      this.message = '';
  
      this.myForm = fb.group({
        username: ['', Validators.required],
        password: ['', Validators.required]
      });
  
      this.username = this.myForm.controls[this.USERNAME];
      this.password = this.myForm.controls[this.PASSWORD];
    }
  
    onSubmit(login: LoginDto): void {
      console.log(`User '${login.username}' attempts to login...`);
      if (this.authService.login(login.username, login.password)) {
        this.location.back();
      } else {
        this.wrongCredentialsInserted = true;
      }
    }
  
    login(username: string, password: string): boolean {
      this.message = '';
      if (!this.authService.login(username, password)) {
        this.message = 'Incorrect credentials.';
        setTimeout(
          function () {
            this.message = '';
          }.bind(this), 2500);
      }
      return false;
    }
  
    logout(): boolean {
      this.authService.logout();
      return false;
    }
  
  }
  </code></pre>
  
  <p><strong>login.component.html</strong></p>
  
  <pre><code>&lt;div class="ui raised segment"&gt;
    &lt;form [formGroup]="myForm"
          (ngSubmit)="onSubmit(myForm.value)"
          class="ui form"
          [class.error]="!myForm.valid"&gt;
  
      &lt;div class="field"
           [class.error]="!username.valid &amp;&amp; username.touched"&gt;
        &lt;label for="username"&gt;Username:&lt;/label&gt;
        &lt;input type="text"
               id="username"
               placeholder="Username"
               [formControl]="username"&gt;
        &lt;div *ngIf="username.hasError('required') &amp;&amp; username.touched"
             class="ui error message"&gt;
          Username is required
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="field"
           [class.error]="!password.valid &amp;&amp; username.touched"&gt;
        &lt;label for="password"&gt;Password:&lt;/label&gt;
        &lt;input type="text"
               id="password"
               placeholder="Password"
               [formControl]="password"&gt;
        &lt;div *ngIf="password.hasError('required') &amp;&amp; password.touched"
             class="ui error message"&gt;Password is required
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="ui grid"&gt;
  
        &lt;div class="two wide column middle aligned"&gt;
          &lt;button type="submit"
          class="ui button"
          [class.disabled]="!myForm.valid"&gt;Submit
          &lt;/button&gt;
        &lt;/div&gt;
  
        &lt;div class="fourteen wide column middle aligned" *ngIf="wrongCredentialsInserted"&gt;
          &lt;div
            class="ui error message"&gt;Invalid credentials
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
      &lt;/form&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>login.component.css: Empty</p>
  
  <p><strong>auth.service.ts:</strong></p>
  
  <pre><code>@Injectable()
  export class AuthService {
  
    constructor(private http: Http) {
    }
  
    login(user: string, password: string): boolean {
      if (user === 'user' &amp;&amp; password === 'password') {
        localStorage.setItem('username', user);
        return true;
      }
  
      return false;
    }
  
    logout(): any {
      localStorage.removeItem('username');
    }
  
    getUser(): any {
      return localStorage.getItem('username');
    }
  
    isLoggedIn(): boolean {
      console.log(`Is user logged in? ' + ${this.getUser() !== null}`);
      return this.getUser() !== null;
    }
  }
  </code></pre>