Angular Bootstrap Progressbar not updating when using with binded progress function

Question

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>{{progressText}}</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.

Answer 1

maybe the progress callback function handler is called out of angular, you can update uploadProgress in NgZone callback.

First inject NgZone instance in the constructor of your component

constructor (private zone: NgZone) { }

And then uodate your uploadProgesss in the handler function like this

handler (p) {
  this.zone.run(() => {
    this.uploadProgress = Math.round(100.0 * p / this.fileSize);
  });
}

Answer 2

Use Bootstrap progress with create a function in the ts to calculate percentage complete.

  <div ngClass="progress">
    <div ngClass="progress-bar progress-bar-success" 
         role="progressbar" aria-valuemin="0" aria-valuemax="100" [style.width]="getPercentage()+'%'" >
      <div class="pl-2">{{getPercentage()}} %</div>
    </div>
  </div>

the function in component should should value of the percentage completed. When ever there is any update in the code angular will reload the function to get updated value.

complete=0
 getPercentage() {
return Math.round(100*this.complete/this.fileSize);    
}

Answer 3

Try to use NgZone ' https://dzone.com/articles/understanding-ngzone '

handler (p) {
  this.zone.run(() => {
    this.uploadProgress = Math.round(100.0 * p / this.fileSize);
  });
}