Progress bar doesn't update angular

Question

Suppose I have a component html where there is my html my progress bar

 <round-progress #progress
    [current]="current"
</round-progress>

Current is the percentage value. In my ts component I do:

this.percentageSubscription = this.percentageService.percentage$.subscribe((percentage) => {
     this.current = this.current + percentage;
     console.log(this.current);
});

The value that I print is correct. It is increase following another algorithm. The console.log show the correct increment but my percentage value is not increase in the progress bar.

Can anyone help me?

How does the round-progress component use the current value? What does it do with it? Try adding {{current}} to your template and see if that value updates. If so, the round-progress component most likely simply only reads the current value once. — Arne
– Arne, Commented Nov 21, 2018 at 15:09
@Arne i put the {{current}} and the value is not update everytime that the percentage is increase but it show at 0 value and 100 value but it doesn't show 20% or 35%. I don't know what I have to do to update this round-progress — Doflamingo19
– Doflamingo19, Commented Nov 21, 2018 at 15:18

Arne · Accepted Answer · 2018-11-21 15:29:20Z

2

Since your value does update correctly in your subscription, but not in your template, the change detection fails to register the new value. You could manually trigger change detection, but you shouldn't.

I'd suggest using the async pipe. And thus rewriting your usage to:

<round-progress #progress
    [current]="current$ | async"
</round-progress>

And:

this.current$ = this.percentageService.percentage$.pipe(
  scan((acc = 0, percentage) => acc + percentage)    
);

As a bonus you don't have to manage your subscription no more. If you locally need the "current" for other purposes you could either share the observable (and have to manage subscriptions again) or you could add a tap that sets a local value.

answered Nov 21, 2018 at 15:29

Arne

8521 gold badge6 silver badges13 bronze badges

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

4 Comments

Doflamingo19 Over a year ago

your solution is not work! :( the value is not update. Now i'm tring to put markForCheck and detectionChanges after subscrive value but they doesn't work same!

Arne Over a year ago

If you add a tap(value => console.log('my new value: ', value) under the scan (second parameter of the pipe), you see the value updating? If you in your template add {{current$ | async}} that value does not update?

Doflamingo19 Over a year ago

yeah in console.log the value is update but in the html isn't update in correct way!

Arne Over a year ago

I’m really curious what you’ve been up to in that component and what the rest of the code looks like. The async pipe even works when you’d completely disable the angular change detection.

Collectives™ on Stack Overflow

Progress bar doesn't update angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related