Is it possible to update the source of an Observable referenced in an Angular template?
For instance, let's say we have this snippet in the template.
{{ ( progress$ | async ) | date:'mm:ss'}}
And we wish to modify the Observable that $progress is linked to?
Is there a way to achieve this?
I conducted a simple experiment on Stackblitz utilizing setTimeout to showcase my intention.
https://stackblitz.com/edit/stackblitz-starters-qxxkg9?file=src%2Fmain.ts
The code responsible for changing the reference can be found in ngOnInit:
setTimeout(() => {
this.progress$ = of(0);
}, 5000);
setTimeout(() => {
this.progress$ = interval(1000).pipe(map((c) => c * 1000));
}, 8000);
The purpose of progress$ is to indicate how long a song has been playing. If the song stops, then progress$ should show 0. If play is resumed, then it should restart the timer...
One potential approach could be to continually pipe the Observable through function streams that modify the state accordingly?
I attempted to alter the pipe stream in this demonstration after 5 seconds, but Angular continues to render the original stream...
ngOnInit() {
setTimeout(() => {
this.progress$.pipe(map((c) => 0));
}, 5000);