How to use concatMap operator in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
The concatMap operator is crucial for maintaining order in Angular applications when processing observables sequentially, ensuring each request completes before the next begins. As the creator of CoreUI with over 25 years of development experience, I use concatMap when order matters and you need guaranteed sequential processing. The most effective use case is for operations that must complete in order, such as file uploads or sequential API calls that depend on previous results. This ensures data integrity and prevents race conditions in your Angular application.
Use concatMap to execute observables sequentially, ensuring each completes before the next begins, maintaining strict order.
import { Component } from '@angular/core'
import { concatMap, from, tap } from 'rxjs'
import { HttpClient } from '@angular/common/http'
@Component({
selector: 'app-file-uploader',
template: `
<div *ngFor="let file of uploadResults">
{{ file.name }}: {{ file.status }}
</div>
`
})
export class FileUploaderComponent {
uploadResults: any[] = []
constructor(private http: HttpClient) {}
uploadFiles(files: File[]) {
from(files).pipe(
concatMap(file =>
this.http.post('/api/upload', file).pipe(
tap(result => {
this.uploadResults.push({
name: file.name,
status: 'completed'
})
})
)
)
).subscribe({
complete: () => console.log('All uploads completed')
})
}
}
This implementation uses concatMap to upload files one at a time in sequence. Each file waits for the previous upload to complete before starting, ensuring predictable order and preventing server overload. The from(files) creates an observable from the file array, and concatMap ensures each HTTP request completes before processing the next file.
Best Practice Note:
This sequential processing pattern is used in CoreUI’s file management components for reliable, ordered operations. Use concatMap when order matters but be aware it’s slower than parallel processing - choose mergeMap for concurrent operations when order isn’t critical.
