Angular Bootstrap Progressbar not updating when using with binded progress function

I am uploading a file to and IPFS node, which uses a progress function to handle updates. As you can see, I binded this to the handler function so it could access all the necessary variables

//This method controls uploading the waveform to IPFS
uploadWaveform()
{
    this.ipfs.files.add(buf, {progress:this.handler.bind(this)})
      .then((result) => {
          console.log("All done!");
          this.progressText = "All Done!";

    });
}

The progress handler function is a simple function which just updates the uploadProgress variable and looks like this:

handler (p) {    
  this.uploadProgress = Math.round(100*p/this.fileSize);      
}

I am using an angular ng-bootstrap progress bar like so:

<ngb-progressbar [value]="uploadProgress">
  <i></i>
</ngb-progressbar>

When I upload a file, it uploads correctly and the progress function works correcly.

However, the uploadProgess variable is not updated in the ng-bootstrap progress bar. If I click anywhere inside the application is will update the value, but not before then.

I know that it is actually updated inside the component because if I put a timeout to print out the value of the progressText 5 seconds after when the upload has completed it reflects the updated value!

      setTimeout(() => {
        console.log("this.progressText = " + this.progressText);
      }, 5000);

Anybody have any ideas why the component is not updating? I assume it is some weird binding problem... Thanks in advance.

from Angular Bootstrap Progressbar not updating when using with binded progress function