How to switch to another pipeline in rxjs? - rxjs

Question

I have two subjects:
const foo = new Subject();
const bar = new Subject();
And each of them acting different:
const foo$ = foo.pipe(
tap(() => {
console.log('in foo');
})
);
const bar$ = bar.pipe(
tap(() => {
console.log('in bar');
}),
);
When I call bar.next to trigger the bar$ pipeline and it's of course works as expected.
But I want to trigger the foo$ pipeline within the bar$ pipeline like that:
const foo$ = foo.pipe(
tap(() => {
console.log('in foo');
})
);
const bar$ = bar.pipe(
tap(() => {
console.log('in bar');
}),
switchMap(() => foo$)
);
This not working.
I have some limitations:
I don't want to trigger the subject because it trigger every subscribers somewhere in the app.
I can't use foo$.next because it's next don't exist in foo$.
I want to use foo$ in the same pipeline of bar$ using the pipeline.
I try to wrap it in from, switchMap, map, switchMapTo - those not working.
Any idea?
stackblitz
import { Subject, tap } from 'rxjs';
import { switchMap } from 'rxjs/operators';
console.clear();
const foo = new Subject();
const bar = new Subject();
const foo$ = foo.pipe(
tap(() => {
console.log('in foo');
})
);
const bar$ = bar.pipe(
tap(() => {
console.log('in bar');
}),
switchMap(() => foo$)
);
bar$.subscribe();
bar.next(1);

Answer 1

You have an active inner subscription to foo$, but it's not emitting anything because that can only be done with your bar Subject. (Which you say that you don't want to trigger.)
So the next best thing is to combine both your foo subject and the bar$ observable as the source of your foo$ observable. Because we don't know when either observable will emit or complete, we'll use the mergeWith() operator.
import { Subject, tap } from 'rxjs';
import { merge } from 'rxjs/operators';
console.clear();
const foo = new Subject();
const bar = new Subject();
const fooSource$ = foo.pipe(
tap(() => {
console.log('in foo');
})
);
const barSource$ = bar$.pipe(
tap(() => {
// do whatever before bar$ emits to foo$
})
);
const foo$ = fooSource$.pipe(
mergeWith(barSource$),
tap(() => {
// do whatever before foo$ emits its value
})
);
const bar$ = bar.pipe(
tap(() => {
console.log('in bar');
})
);
bar$.subscribe();
bar.next(1);
Note that with mergeWith() you cannot distinguish which observable is triggering the emit. So it's a good idea to have both fooSource$ and barSource$ emit the same value type.