transformation

concatMap

Projects each source value to an inner Observable and concatenates them in order, waiting for each to complete before subscribing to the next.

Signature

concatMap<T, R>(project: (value: T, index: number) => ObservableInput<R>): OperatorFunction<T, R>

Marble Diagram

source:  --a-----b-----c----|
concatMap(x => timer(2))
result:  --a1----b1----c1--|
(strictly sequential, no overlap)

Example

import { from } from 'rxjs'
import { concatMap } from 'rxjs/operators'
import { ajax } from 'rxjs/ajax'

from(['step1', 'step2', 'step3']).pipe(
  concatMap(step => ajax.post(`/api/${step}`))
).subscribe(console.log)
// Each step runs only after the previous one completes

Common Use Cases

Sequential API calls where order matters (wizard steps, checkout flow)
Animate items one after another
Process a queue of tasks without overlap

Flow Diagram