concatMap

function stable

Projects each source value to an Observable which is merged in the output Observable, in a serialized fashion waiting for each one to complete before merging the next.

concatMap<T, R, O extends ObservableInput<any>>(project: (value: T, index: number) => O, resultSelector?: (outerValue: T, innerValue: ObservedValueOf<O>, outerIndex: number, innerIndex: number) => R): OperatorFunction<T, ObservedValueOf<O> | R>

Parameters

project

A function that, when applied to an item emitted by the source Observable, returns an Observable.

resultSelector

Optional. Default is undefined.

Type: (outerValue: T, innerValue: ObservedValueOf, outerIndex: number, innerIndex: number) => R.

Returns

OperatorFunction<T, ObservedValueOf<O> | R>: A function that returns an Observable that emits the result of applying the projection function (and the optional deprecated resultSelector) to each item emitted by the source Observable and taking values from each projected inner Observable sequentially.

Description

Maps each value to an Observable, then flattens all of these inner Observables using concatAll.

concatMap marble diagram

Returns an Observable that emits items based on applying a function that you supply to each item emitted by the source Observable, where that function returns an (so-called "inner") Observable. Each new inner Observable is concatenated with the previous inner Observable.

Warning: if source values arrive endlessly and faster than their corresponding inner Observables can complete, it will result in memory issues as inner Observables amass in an unbounded buffer waiting for their turn to be subscribed to.

Note: concatMap is equivalent to mergeMap with concurrency parameter set to 1.

Example

For each click event, tick every second from 0 to 3, with no concurrency

import { fromEvent, interval } from 'rxjs';
import { concatMap, take } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');
const result = clicks.pipe(
  concatMap(ev => interval(1000).pipe(take(4)))
);
result.subscribe(x => console.log(x));

// Results in the following:
// (results are not concurrent)
// For every click on the "document" it will emit values 0 to 3 spaced
// on a 1000ms interval
// one click = 1000ms-> 0 -1000ms-> 1 -1000ms-> 2 -1000ms-> 3

Overloads

concatMap(project: (value: T, index: number) => O): OperatorFunction<T, ObservedValueOf<O>>

Parameters

project

Type: (value: T, index: number) => O.

Returns

OperatorFunction<T, ObservedValueOf<O>>

concatMap(project: (value: T, index: number) => O, resultSelector: undefined): OperatorFunction<T, ObservedValueOf<O>>

Deprecation Notes

The resultSelector parameter will be removed in v8. Use an inner map instead. Details: https://rxjs.dev/deprecations/resultSelector

Parameters

project

Type: (value: T, index: number) => O.

resultSelector

Type: undefined.

Returns

OperatorFunction<T, ObservedValueOf<O>>

concatMap(project: (value: T, index: number) => O, resultSelector: (outerValue: T, innerValue: ObservedValueOf<O>, outerIndex: number, innerIndex: number) => R): OperatorFunction<T, R>

Deprecation Notes

The resultSelector parameter will be removed in v8. Use an inner map instead. Details: https://rxjs.dev/deprecations/resultSelector

Parameters

project

Type: (value: T, index: number) => O.

resultSelector

Type: (outerValue: T, innerValue: ObservedValueOf, outerIndex: number, innerIndex: number) => R.

Returns

OperatorFunction<T, R>

See Also

© 2015–2021 Google, Inc., Netflix, Inc., Microsoft Corp. and contributors.
Code licensed under an Apache-2.0 License. Documentation licensed under CC BY 4.0.
https://rxjs.dev/api/operators/concatMap