Using MergeMap in Angular

The Angular MergeMap maps each value from the source observable into an inner observable, subscribes to it, and then starts emitting the values from it replacing the original value. It creates a new inner observable for every value it receives from the Source. Unlike SwitchMap, MergeMap does not cancel any of its inner observables. It merges the values from all of its inner observables and emits the values back into the stream.

Syntax

The syntax of the MergeMap operator is as shown below.

project: is a function that we use to manipulate the values emitted by the source observable. The project function accepts two arguments. one is value i.e. the value emitted by the source observable. The second argument is index number. The index number starts from 0 for the first value emitted and incremented by one for every subsequent value emitted. It is similar to the index of an array. The project function must return an observable.

MergeMap Example

To use MergeMap in Angular first we need to import it our Component or Service.

The following code shows how to use MergeMap in Angular. We have two observables srcObservable which emits 1,2,3,4 & innerObservable which emits 'A','B','C','D'.


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

The project function is the first argument to the MergeMap. It takes the values from the srcObservable. For each value, it receives from the srcObservable (i. e. 1,2,3 &4) it creates a new observable i.e. innerObservable.

MergeMap automatically subscribes to the innerObservable returned by the project function. The innerObservable emits the values (A, B, C, D), and pushes it to the stream

Hence the subscribers will receive the values A, B, C, D four times. Once for each value of the srcObservable.

MergeMap Vs Map

The map operators emit value as observable. The MergeMap creates an inner observable, subscribes to it, and emits its value as observable.

The Following example shows the difference between MergeMap & Map.

The Map operator below maps the value coming from the source observable to a new value by multiplying it by 2. It then emits it into the observable stream. The subscribers will receive the values 2, 4, 6 & 8.

We can achieve the same using the MergeMap also. The only thing that changes is how we return the new value from our project function. The map returns the value as val*2, while the MergeMap returns the value as observable (of(val*2)) using the of function. It also subscribes to the newly created observable and emits its value to the stream.

MergeMap combines results of inner observable

MergeMap never cancels any of its inner observable. It waits for them to finish and emit value. Note that the inner observable’s might finish in an order that is different from the order in which they are subscribed. MergeMap does not care about the order.

In the following example, we create an observable from the click event of a button using the fromEvent method. On every click of the button, the MergeMap operator returns an inner observable delayedObs

The delayedObs emits 5 values separated by 1000 ms.

When you click on the button, the clicks observable emits its first value. Inside the MergeMap we increase the count by 1 and pass it to the delayedObs. The mergeMap subscribes to the delayedObs. It starts emitting values A to E prepended by the count.

When you click again, the mergeMap again subscribes to the delayedObs and it starts to emit the values again.

The mergeMap collects all the emitted values as they arrive from all of its inner observables and emits it into the subscribers.

MergeMap Example in Angular

Using MergeMap in Angular

The following are some of the real use cases for the MergeMap in Angular

Merging values from two or more HTTP Calls

Consider a scenario where you receive data from an observable (outer observable). For each of those values, you want to call another observable (inner observable) to get more data. The scenario like this is an ideal use case for MergeMap

In the following example, we have an array of a breed of dogs. We convert the array into an observable. This becomes our outer observable

For each of those dog breeds emitted by the outer observable, we make an HTTP request to get the sub-breeds using the free Dog API. The URL for the HTTP request constructed using the dog breed, which we receive from the outer observable.

The MergeMap automatically subscribes to all of its inner observable and waits for them to complete. It then pushes the values from them into the subscribers.

The above code, without using the MergeMap is as follows. The code makes use of nested observable.

Using ForkJoin with MergeMap

The MergeMap create a one inner observable for each value of outer observable. To Create more than one inner observable, we can make use of the ForkJoin Operator.

In the following example, along with a list of breeds, we also send a query for a random image of the dog breed. This requires us to send two HTTP get request in Angular. We create two observables obs1 & obs2 to do that. Then we use the forJoin to merge obs1 with obs2 and return a new observable.

References

  1. MergeMap API

Read More

  1. Angular HTTP Get
  2. Angular SwitchMap

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top