title: Angular2 ngIf not updated if change within promise
body: <p>In our component, we have an upload form, and a confirm message.</p>
  
  <blockquote>
    <p>file-form.component.html</p>
  </blockquote>
  
  <pre><code>&lt;div class="tab-pane active" id="upload"&gt;
      &lt;div id="loader-wrapper" *ngIf="isUploadLoaderVisible"&gt;
          &lt;div id="loader"&gt;&lt;/div&gt;
          &lt;p class="text-center"&gt;Uploading&lt;/p&gt;
      &lt;/div&gt;
      &lt;div *ngIf="!isFileSubmitted"&gt;
          &lt;form class="form-horizontal" [formGroup]="fileUploadForm" (ngSubmit)="onSubmit()"&gt;
          &lt;input type="file" id="file" formControlName="file" (change)="fileChangeEvent($event)"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div *ngIf="isFileSubmitted"&gt;
          &lt;p class="alert alert-success"&gt;
              &lt;i class="fa fa-check"&gt;&lt;/i&gt;
              Thanks for upload. 
          &lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-default" [routerLink]="['..']"&gt;Back&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>file-form.component.ts</p>
  </blockquote>
  
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  import {
    FormGroup,
    Validators,
    FormBuilder,
    FormControl
  } from '@angular/forms';
  import { AngularFire, FirebaseApp } from 'angularfire2';
  
  @Component({
    selector: 'app-file-form',
    templateUrl: './file-form.component.html',
    styleUrls: ['./file-form.component.css']
  })
  export class SfFileFormComponent implements OnInit {
    // States togglers
    isFileSubmitted: boolean = false;
    isUploadLoaderVisible: boolean = false;
  
    // Declarations
    fileUploadForm: FormGroup;
    uploadedFile;
    isFileValid: boolean = false;
    uploadedCorrectedFilename: string;
  
    constructor(private formBuilder: FormBuilder,
      public af: AngularFire,
      @Inject(FirebaseApp) private firebaseApp: firebase.app.App) { }
  
    ngOnInit() {
      this.initForm();
    }
  
    private initForm() {
      let file = '';
  
      this.fileUploadForm = this.formBuilder.group({
        file: file
      });
    }
  
    fileChangeEvent(fileInput: any) {
      this.uploadedFile = fileInput.target.files;
      let fileType: string = _.toLower(this.uploadedFile[0].type);
  
      if ( fileType === 'application/pdf' ) {
        this.isFileValid = true;
        console.log('File is valid. Click to upload file', this.uploadedFile[0]);
      } else {
         this.isFileValid = false;
         this.fileUploadForm.reset();
         console.log('File is invalid. Cancel Upload and block form submission', this.uploadedFile[0]);
      }
    }
  
    onSubmit() {
      if (this.uploadedFile.length === 1) {
        let file: FileList = this.uploadedFile[0];
        console.log('Uploading File', file);
  
        this.isUploadLoaderVisible = true;
  
        // Upload to Firebase
        this.firebaseApp
          .storage()
          .ref()
          .child('filesdummy/' + file.name)
            .put(file)
              .then((snapshot) =&gt; {
                console.log('Uploaded a blob or file!');
  
                this.isUploadLoaderVisible = false;
                this.isFileSubmitted = true;
                console.log('isFileSubmitted',this.isFileSubmitted);
                console.log('isUploadLoaderVisible', this.isUploadLoaderVisible);
              });
      }
    }
  
  }
  </code></pre>
  
  <p>At form submit, we set our triggers boolean to display the loader. It works perfectly and instantaneously. </p>
  
  <p>The code then submit the file (to firebase in our case) and when the promise resolves, I change the loader <code>isUploadLoaderVisible</code> to <code>false</code> and confirmation message one <code>isFileSubmitted</code> to true.</p>
  
  <p>The upload works and in console, I can see booleans where changed correctly and <strong>immediately</strong>:</p>
  
  <blockquote>
    <p>Uploaded a blob or file!</p>
    
    <p>isFileSubmitted true </p>
    
    <p>isUploadLoaderVisible false</p>
  </blockquote>
  
  <p>But on browser (I use Chrome), <strong>the view is not "switched" and the ngIf seems to actually see the isFileSubmitted is now true only if i change window/tab and come back or after a very big delay (30-34 sec).</strong> Such as the new boolean value of my triggers where not "passed" to the component before a long time...</p>
  
  <p>Maybe it's because <strong>I change the boolean states directly from the <code>then()</code> promise result</strong>? I don't see how to change the booleans in a different way than I did.</p>
  
  <p><strong>Note</strong>: The delay can't be cause by uploading time. Since the promise wouldn't be resolve until upload finish, I wouldn't see the <code>Uploaded</code> console log. And my test file is currently 50kb.</p>
  
  <p>Do you have any idea?</p>