I have a service which returns an observable. In an Angular component, I’d like to have
- an initial load of data when my component loads (constructor)
- dynamic control over refreshing the data elsewhere in the component
I use a BehaviorSubject and combineLatest to achieve that. I was hoping that whenever I would need a data refresh, I could simply call .next on my BehaviorSubject and it would force a refresh of data.
I’ve missed out on the fundamentals somewhere. When onClick() is executed, I do not get a different value from the result of combineLatest, it is always the same value, the value that was returned from the first call. Presumably only the last (latest) value is emitted, how do I achieve what I’m trying to do?
What I’ve tried
Code snapshot
obs$ = this.service.getRandomNumber(1000);
fetchRandom$ = new BehaviorSubject<void>(void 0);
randomNumber = 0;
randomNumberGenerated = signal<boolean>(false);
constructor(private service: MyService) {
combineLatest([this.obs$, this.fetchRandom$])
.pipe(
takeUntilDestroyed(),
map(([randomNumber]) => randomNumber)
)
.subscribe((randomNumber) => {
console.log('random number', randomNumber);
this.randomNumber = randomNumber;
this.randomNumberGenerated.set(true);
});
}
onClick() {
this.fetchRandom$.next();
}
Stackblitz Demo
0
CombineLatest will not force a retry on the input observables. It will simply read the last value emitted.
If you need to trigger a retry, consider this approach:
const randomNumber$ = fetchRandom$.pipe(switchMap((input) => this.service.getRandomNumber(input)));
Then
randomNumber$.subscribe(randomNumber => {...)
This will watch fetchRandom$ for emitted values. When fetchRandom$ emits, it will spawn a new inner-observable (your service call response observable).
SwitchMap says “watch this inner observable, and when it emits, re-emit this value on the outer observable”.
Also, with SwitchMap, if another value is emitted by fetchRandom$ before the service call completes, it will cancel the initial request.
Use mergeMap if you want the initial request to still emit when it completes, even if another fetchRandom$ request was made before the first one completed.