Angular 2: when i change a variable in a promise.than in ngOnInit the view doesn't refresh

Question

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

The execution is as expected as I can 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");
    });
}

The app view:

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

how can I change the Label text in a promise an see it "refreshing" into the app view?

SOLVED:

I solved the problem by forcing an update

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

[...]
this.ref.detectChanges();

Somite

How does Label look like? – Monogamous

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

That's the app components view according to your question. Please post the code of the label component. – Monogamous

try using import {NgZone} from "@angular/core"; constructor(private _ngZone: NgZone){} this._ngZone.run(() => { this.foo="foobar"; }); – Olmstead

there is no code for the label component. i declared a variable and i used the angular binding [text]='foo' to print the string in the view – Somite

@HabibKazemi this is the code but is not working promise.then(x=> { this.foo="foobar"; this._ngZone.run(() => { this.foo="xxxxx"; }); console.log("promise than"); }); – Somite

For me <label text="foobar"></label> (plain HTML without any Angular) also doesn't show anything in the browser, therefore it's expected that <Label [text]='foo'></Label> doesn't. See @Thyagu's answer. – Monogamous

@GünterZöchbauer are you using a mobile app with NativeScript? because a NativeScript label is not an HTML label – Somite

@AndreaVeronesi I see. Didn't know. – Monogamous