How to use mergeMap operator in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
The mergeMap operator is essential for handling concurrent observables in Angular, allowing multiple HTTP requests to run in parallel without canceling previous requests. With over 25 years of experience building enterprise applications and as the creator of CoreUI, I use mergeMap for scenarios requiring parallel processing. The most effective use case is when you need to process multiple items concurrently, such as fetching details for multiple users simultaneously. This provides better performance than sequential processing while maintaining proper subscription management.
Use mergeMap to execute multiple observables concurrently without canceling previous emissions, ideal for parallel HTTP requests.
import { Component } from '@angular/core'
import { mergeMap, from } from 'rxjs'
import { HttpClient } from '@angular/common/http'
@Component({
selector: 'app-user-details',
template: `
<div *ngFor="let user of users">
{{ user.name }} - {{ user.email }}
</div>
`
})
export class UserDetailsComponent {
users: any[] = []
constructor(private http: HttpClient) {
const userIds = [1, 2, 3, 4, 5]
from(userIds).pipe(
mergeMap(id => this.http.get(`/api/users/${id}`))
).subscribe(user => {
this.users.push(user)
})
}
}
This example demonstrates mergeMap’s concurrent behavior where all five HTTP requests execute simultaneously rather than waiting for each to complete. The from(userIds) creates an observable from the array, and mergeMap transforms each ID into an HTTP request. Unlike switchMap which cancels previous requests, mergeMap allows all requests to complete and emit their results as they arrive.
Best Practice Note:
This parallel processing pattern is used in CoreUI’s data-heavy components for optimal performance. Be cautious with mergeMap when dealing with many concurrent requests - consider using mergeMap with a concurrency limit parameter to prevent overwhelming the server.
