RxJS switchMap() Transformation Operator

RxJS switchMap() operator is a transformation operator that applies a project function on each source value of an Observable, which is later merged in the output Observable, and the value given is the most recent projected Observable.

Syntax:

Following is the syntax of the switchMap() operator:

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

Parameter Explanation

project_func: It specifies an argument function which is applied to all the values emitted from source observable and returns an Observable.
project: It specifies a function which returns an Observable when it is applied to an item emitted by the source Observable.
resultSelector: It is an Optional argument. Its default value is undefined. Type: (outerValue: T, innerValue: ObservedValueOf, outerIndex: number, innerIndex: number) => R.

Return value

The switchMap() operator’s return value is observable with values based on the projection function applied on each value of source observable and taking only the values from the most recently projected inner Observable.

Why switchMap() operator is preferred over other mapping or flattening operators?

The RxJS switchMap() operator is generally considered a safer default to mergeMap() operator. Another benefit is that this operator can cancel in-flight network requests, but if you would like more than one inner subscription to be maintained, you should try mergeMap() operator.

The main difference between RxJS switchMap() operator and other flattening operators is the canceling effect. In switchMap() operator, on each emission, the previous inner observable (the result of the function you supplied) is canceled, and the new observable is subscribed. This process is called switch to a new observable.

This is best suited for scenarios like typeaheads where you are no longer concerned with the previous request’s response when a new input arrives. This is also a safe option in situations where a long-lived inner observable could cause memory leaks.

Let us see some examples of switchMap() operator to understand it clearly.

Example 1 (Simple switchMap Example)

  import { of} from ‘rxjs’;  import { switchMap } from ‘rxjs/operators’;  let text = of(‘Hello guys, Welcome To’);  let case1 = text.pipe(switchMap((value) => of(value + ‘ TutorAspire!’)));  case1.subscribe((value) => {console.log(value);});  

Output:

After executing the above example, you will see the following result as array:

RxJS switchMap() Transformation Operator

Example 2 (Using a resultSelector function)

  import { timer, interval } from ‘rxjs’;  import { switchMap } from ‘rxjs/operators’;  // switch to new inner observable when source emits, emit result of project function  timer(0, 5000)    .pipe(      switchMap(        _ => interval(2000),        (outerValue, innerValue, outerIndex, innerIndex) => ({          outerValue,          innerValue,          outerIndex,          innerIndex        })      )    )    .subscribe(console.log);  

Output:

After executing the above example, you will see the following result as array:

RxJS switchMap() Transformation Operator

Example 3 (Generate new Observable according to the source Observable values)

  import { of } from ‘rxjs’;  import { switchMap } from ‘rxjs/operators’;  const switched = of(2, 3, 5).pipe(switchMap((x: number) => of(x, x ** 2, x ** 3)));  switched.subscribe(x => console.log(x));  

Output:

After executing the above example, you will see the following result as an array:

RxJS switchMap() Transformation Operator

Example 4 (Restart interval on every click)

  import { interval, fromEvent } from ‘rxjs’;  import { switchMap } from ‘rxjs/operators’;  fromEvent(document, ‘click’)  .pipe(    // restart counter on every click    switchMap(() => interval(1000))  )  .subscribe(console.log);  

Output:

After executing the above example, you will see the following result as an array:

RxJS switchMap() Transformation Operator

In the above example, you can see that whenever you click on the RxJS playground, it restarts the interval from the initial value.

Example 5 (Countdown timer with pause and resume)

  import { interval, fromEvent, merge, empty } from ‘rxjs’;  import { switchMap, scan, takeWhile, startWith, mapTo } from ‘rxjs/operators’;  const COUNTDOWN_SECONDS = 60;  // elem refs  const remainingLabel = document.getElementById(‘remaining’);  const pauseButton = document.getElementById(‘pause’);  const resumeButton = document.getElementById(‘resume’);  // streams  const interval$ = interval(1000).pipe(mapTo(-1));  const pause$ = fromEvent(pauseButton, ‘click’).pipe(mapTo(false));  const resume$ = fromEvent(resumeButton, ‘click’).pipe(mapTo(true));  const timer$ = merge(pause$, resume$)    .pipe(      startWith(true),      switchMap(val => (val ? interval$ : empty())),      scan((acc, curr) => (curr ? curr + acc : acc), COUNTDOWN_SECONDS),      takeWhile(v => v >= 0)    )    .subscribe((val: any) => remainingLabel.innerHTML = val);  

Output:

After executing the above example, you will see the following result as an array:

RxJS switchMap() Transformation Operator

In the above example, you can see that we have set a countdown timer for 60 seconds. When you click on the “Pause timer” button, it pauses the remaining time, and when you click on the “Resume timer” button, it resumes the countdown as it is.

Next TopicRxJS Operators

RxJS switchMap() Transformation Operator

RxJS switchMap() Transformation Operator

Syntax:

Parameter Explanation

Return value

Why switchMap() operator is preferred over other mapping or flattening operators?

Example 1 (Simple switchMap Example)

Example 2 (Using a resultSelector function)

Example 3 (Generate new Observable according to the source Observable values)

Example 4 (Restart interval on every click)

Example 5 (Countdown timer with pause and resume)

PHP strchr() function

Java InetAddress class

You may also like