Reputation: 1639
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
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