I'm developing an angular 7 app, I know that nested subscribe functions are an anti pattern but using correctly the transformation operators (like mergeMap, switchMap ...) inside a pipe function I could always avoid it. I'm facing a situation in which I can't understand how the inner observable works. I have a form of filters which are fully intialized after an event signaled by an observable, after this event I have to listen form changes via .valueChanges on the formGroup, format the filters and finally filter the results.
this.filters.categoriesReady.asObservable()
.pipe(
tap((categories) => {
this._createControlsCategories(categories);
this.categories = categories;
console.log('higher order observable');
}),
switchMap(() => this.filterForm.valueChanges),
switchMap(filtersRaw => this._formatFilters(filtersRaw)),
takeUntil(this.unsubscribe)
)
.subscribe(
filtersFormatted => {
this.filterResults(filterFormatted);
this.filterUpdated.emit(true);
}
);
I thought that the inner stream this.filterForm.valueChanges
would not work because it is dependent on the the event this.filters.categoriesReady
which is fired only once (indeed the console.log print out once) and so I thought that it was not always listening as I would have liked. Instead the code in the subscribe function is executed each time there are changes applied to the filters.
Can someone explain it to me?
withLatestFrom
.