Updating Angular view from async function

Question

I have a async method that initializes some variable. The library I'm using is offering a onProgress callback that gets the current percentage passed. I want to display this percentage in my view, but the view is only getting updated when the loading process is finished. The console.log statements however are printing regularly. What am I missing?

import {Component, OnInit} from '@angular/core';
import * as tf from '@tensorflow/tfjs';

@Component({
  template: `<button (click)="loadModel()">Load</button>
             <p>{{progress}}</p>
`
})
export class LoadModelComponent {

  progress: number = 0;

  async loadModel() {
    this.model = await tf.loadGraphModel('./model.json', {
      onProgress: fraction => {
        this.progress = fraction;
        console.log(this.progress);
      }
    });
  }

Answer 1

An easy solution could be

async loadModel() {
  this.model = await tf.loadGraphModel('./model.json', {
    onProgress: fraction => {
      setTimeout(() => { 
        this.progress = fraction;
        console.log(this.progress);
      }, 0);
    }
  });
}

setTimeout would force angular to rerender the HMTL

Answer 2

Could it be that the progress call is running outside the change detection zone? Maybe. But in that case, you can make it work with the following

export class LoadModelComponent {

  progress: number = 0;

  constructor(private ngZone: NgZone) {}

  async loadModel() {
    this.model = await tf.loadGraphModel('./model.json', {
      onProgress: fraction => {

        this.ngZone.run(() => {
          this.progress = fraction;
        });
        
        console.log(this.progress);
      }
    });
  }