Angular - Update HTML when promise is resolved

I have a problem with Angular and Promises I don't understand.

This is my html:

<div>Is Ready? {{isReady}}</div>
<div *ngIf="isReady">Show this</div>
<div *ngIf="!isReady">Show that</div>


This is my TS file:

isReady: boolean = false;

constructor(
private myService: MyService){
await this.giveMeSlowData();
}

async giveMeSlowData() : Promise<void>{
console.log(await this.myService.getResult());
this.isReady = await this.myService.getResult();
}


Usually everything in this {{}} in HTML changes as soon as the variable in TS file. But not now. I can see console log after 5-6 seconds, but the HTML doesn't change. Why?

Thanks anyone!

Continue reading...