Home » RxJS switchMap() Transformation Operator

RxJS switchMap() Transformation Operator

by Online Tutorials Library

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:

or

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)

Output:

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

RxJS switchMap() Transformation Operator

Example 2 (Using a resultSelector function)

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)

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)

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)

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

You may also like