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.

@Kousic This is for angular not angularjs

Tom O'Brien
– Tom O'Brien

2019-02-01 12:30:08 +00:00
Commented Feb 1, 2019 at 12:30 — Tom O'Brien
– Tom O'Brien, Commented Feb 1, 2019 at 12:30

zhimin · Accepted Answer · 2019-02-01 12:53:08Z

5

+50

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);
  });
}

answered Feb 1, 2019 at 12:53

zhimin

3,05017 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Nasir · Accepted Answer · 2019-02-01 12:48:17Z

0

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);    
}

answered Feb 1, 2019 at 12:48

Muhammad Nasir

2,2045 gold badges38 silver badges66 bronze badges

Comments

Ankur Jain · Accepted Answer · 2019-02-06 10:30:10Z

0

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

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

answered Feb 6, 2019 at 10:30

Ankur Jain

2211 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular Bootstrap Progressbar not updating when using with binded progress function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related