understand the behavior of nested observables

Question

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?

Answer 1

switchMap switches into a new inner observable after the outter observable emits, so the outter only needs to emit once. The behavior of switchMap though is that it cancels and resubscribes to the inner observable everytime the outter observable emits.

TBH, in this case, you seem to just be using the outter observable to guarantee the inner observable isn't subscribed until categoriesReady observable emits. I'm not sure what the reasoning behind that is, when you could't just subscribed to both independently since they don't seem to be reliant upon eachother.., nor am I sure why _formatFilters returns an observable.

but hope that clears up the switchMap behavior