title: Async input not updated Angular2
body: <p>I'm trying to retrieve some data in a parent component and use it in a child component. But changes are not detected (ngOnChanges is not fired).</p>
  
  <p><strong>parent.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'parent',
    templateUrl: './parent.component.html'
  })
  export class ParentComponent {
    countries: VisitedCountries;
    @ViewChild('childModalComponent')
    childModalComponent: ChildModalComponent;
  
  
    openChildModal() {
      this.childModalComponent.openModal();
    }
  
    displayProfil() {
      var that = this;
  
     // If I put this here, child component has an updated variable =&gt; ngOnChanges is fired
     // this.countries = new VisitedCountries(...)
  
      this.userService.getUserProfil()
        .then(result =&gt; {
              // this.countries is not updated in child component
              that.countries = new VisitedCountries(result) as VisitedCountries;
  
        });
    }
  }
  </code></pre>
  
  <p><strong>parent.component.html</strong></p>
  
  <pre><code>&lt;span (click)="openChildModal()"&gt;
  &lt;child-modal [countries]="countries"&gt; &lt;/child-modal&gt;
  </code></pre>
  
  <p><strong>UPDATED</strong></p>
  
  <p><strong>childModal.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'child-modal',
    templateUrl: './childModal.component.html'
  })
  export class ChildModalComponent implements OnInit, OnChanges {
    @Input()
    countries: VisitedCountries;
    selectedCountries: Country[];
  
    ngOnChanges(changes: SimpleChanges) {
     // not fired with async content
    }
  
    openModal() {
      this.selectedCountries = [];
  
      // simplified algo
      for (country in this.countries) {
        this.selectedCountries.push(country); 
      }
  
      // this.selectedCountries is well filled at this point
    }
  
  }
  </code></pre>
  
  <p><strong>childModal.component.html</strong></p>
  
  <pre><code>&lt;modal&gt;
    ...
      // primeng autocomplete
      &lt;p-autoComplete [(ngModel)]="selectedCountries" [suggestions]="filteredCountriesMultiple" field="label" (completeMethod)="filterCountryMultiple($event)"
          [multiple]="true"&gt;
      &lt;/p-autoComplete&gt;
  
   ...
  &lt;/modal&gt;
  </code></pre>
  
  <p><strong>user.service.ts</strong></p>
  
  <pre><code>@Injectable()
  export class UserService {
    getUserProfil(userId: string) {
      return this.http.get(url)
        .toPromise()
        .then(response =&gt; response.json() as User)
        .catch(error =&gt; {
          return error;
        }
        );
    }
  }
  </code></pre>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>If I use zone.run() it works (but I still don't know why I have to do this)</p>
  
  <p><strong>parent.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'parent',
    templateUrl: './parent.component.html'
  })
  export class ParentComponent {
    function () {
      this.zone.run(() =&gt; this.displayProfil());
    }
  }
  </code></pre>
  
  <p>and </p>
  
  <p><strong>childModal.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'child-modal',
    templateUrl: './childModal.component.html'
  })
  export class ChildModalComponent implements OnInit, OnChanges {
    @Input()
    countries: VisitedCountries;
    selectedCountries: Country[];
  
    openModal() {
      this.selectedCountries = [];
      this.zone.run(() =&gt; {
        // I had another async call here
        service.getObject().then (() =&gt; {
          for (country in this.countries) {
            this.selectedCountries.push(country); 
          }
        });
      }); 
  
     // or this.ref.detectChanges(); also works  
   }
  }
  </code></pre>