switchmap.md

#switchMap ####signature: switchMap(project: function: Observable, resultSelector: function(outerValue, innerValue, outerIndex, innerIndex): any): Observable

Map to observable, complete previous inner observable, emit values.

---

💡 If you would like more than one inner subscription to be maintained, try mergeMap!

💡 This operator is generally considered a safer default to mergeMap!

💡 This operator can cancel in-flight network requests!

---

Examples

Example 1: Restart interval every 5 seconds

( jsBin | jsFiddle )

//emit immediately, then every 5s
const source = Rx.Observable.timer(0, 5000);
//switch to new inner observable when source emits, emit items that are emitted
const example = source.switchMap(() => Rx.Observable.interval(500));
//output: 0,1,2,3,4,5,6,7,8,9...0,1,2,3,4,5,6,7,8
const subscribe = example.subscribe(val => console.log(val));

Example 2: Reset on every click

( jsBin | jsFiddle )

//emit every click
const source = Rx.Observable.fromEvent(document, 'click');
//if another click comes within 3s, message will not be emitted
const example = source.switchMap(val => Rx.Observable.interval(3000).mapTo('Hello, I made it!'));
//(click)...3s...'Hello I made it!'...(click)...2s(click)...
const subscribe = example.subscribe(val => console.log(val));

Example 3: Using a resultSelector function

( jsBin | jsFiddle )

//emit immediately, then every 5s
const source = Rx.Observable.timer(0, 5000);
//switch to new inner observable when source emits, invoke project function and emit values
const example = source.switchMap(() => Rx.Observable.interval(2000), (outerValue, innerValue, outerIndex, innerIndex) => ({outerValue, innerValue, outerIndex, innerIndex}));
/*
	Output:
	{outerValue: 0, innerValue: 0, outerIndex: 0, innerIndex: 0}
	{outerValue: 0, innerValue: 1, outerIndex: 0, innerIndex: 1}
	{outerValue: 1, innerValue: 0, outerIndex: 1, innerIndex: 0}
	{outerValue: 1, innerValue: 1, outerIndex: 1, innerIndex: 1}
*/
const subscribe = example.subscribe(val => console.log(val));

Additional Resources

• switchMap 📰 - Official docs
• Starting a stream with switchMap 📹 💵 - John Linquist

---

📁 Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/operator/switchMap.ts