CODEWITHSUNDEEP
javascriptangulartypescriptprogress-barangular6
Doflamingo19
Doflamingo19

Reputation: 1639

Progress bar doesn't update angular

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?

Upvotes: 1

Views: 1473

Answers (1)

Arne
Arne

Reputation: 852

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.

Upvotes: 2

Related Questions