Angular 2: when I change a variable in a promise. in ngOnInit view is not updated

Question

I created a short example of an Angular 2 application built using NativeScript , and I expect the foo variable to be "foo" at the beginning, then ngOnInit() will change it to "bar" first, and then the promise will return, and I should see " foobar "in Label, but instead I see a" bar ".

The execution is done as I see in the logs:

 JS: afterBar JS: promise new JS: promise than 

component.ts

 foo:String="foo"; ngOnInit() { this.foo = "bar"; console.log("afterBar"); var promise = new Promise((resolve)=>{ resolve(42); console.log("promise new"); }); promise.then(x=> { this.foo="foobar"; console.log("promise than"); }); } 

Type of application:

 <Label [text]='foo'></Label> 

How can I change the label text in a promise and see it “refreshing” in the application view?

SOLVE:

I solved the problem by running the update

 import { ChangeDetectorRef } from '@angular/core'; [...] constructor( [...], private ref: ChangeDetectorRef) { } [...] this.ref.detectChanges();