RxJS mergeMap() Transformation Operator
RxJS mergeMap() 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.
In other words, we can say that the RxJS mergeMap() operator maps each value to an Observable, then flattens all of these inner Observables using mergeAll.
The mergeMap() operator is also called flatMap. This operator is best to use when you want to flatten an inner observable and manually control the number of inner subscriptions. The RxJS mergeMap() operator maintains multiple active inner subscriptions at once. So, it is possible to create a memory leak through long-lived inner subscriptions.
Syntax:
Following is the syntax of the mergeMap() operator:
Or
Parameter Explanation
- project_func: It specifies an argument function that is applied to all the values of the source observable.
- project: It specifies a function that returns an Observable when applied to an item emitted by the source Observable.
- resultSelector: It is an optional argument. Its default value is undefined. Type: number | ((outerValue: T, innerValue: ObservedValueOf, outerIndex: number, innerIndex: number) => R).
- concurrent: It is also an optional argument. Its default is number.POSITIVE_INFINITY. It specifies the maximum number of input Observables being subscribed to concurrently.
Return value
The mergeMap() operator’s return value is observable that emits the result after applying the projection function on each value of source observable and merging the results of the Observables obtained from this transformation.
Let us see some examples of mergeMap() operator to understand it clearly.
Example 1 (Map and flatten each letter to an Observable within a time interval)
Output:
After executing the above example, you will see the following result as array:
In the above example, you can see that the mergeMap() operator maps and flatten each letter to an Observable after every 2 second.
Example 2 (mergeMap with concurrent value)
Output:
After executing the above example, you will see the following result as array:
Example 3 (mergeMap with promise)
Output:
After executing the above example, you will see the following result as array:
Example 4 (mergeMap with resultSelector)
Output:
After executing the above example, you will see the following result as array:
Example 5 (mergeMap with Ajax Observable)
HTML File:
Output:
After executing the above example, you will see the following result as array:
Example 6 (Using mergeMap to determine the click locations)
HTML File:
Output:
After executing the above example, you will see the following result as array:
In the above example, you can see that when you click anywhere on the RxJS playground, it will show the corresponding click location on the console.