concatMapTo

Projects each source value to the same Observable which is merged multiple times in a serialized fashion on the output Observable.

concatMapTo<T, R, O extends ObservableInput<unknown>>(innerObservable: O, resultSelector?: (outerValue: T, innerValue: ObservedValueOf<O>, outerIndex: number, innerIndex: number) => R): OperatorFunction<T, ObservedValueOf<O> | R>

Parameters

innerObservable	An Observable to replace each value from the source 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 of values merged together by joining the passed Observable with itself, one after the other, for each value emitted from the source.

Description

It's like concatMap, but maps each value always to the same inner Observable.

Maps each source value to the given Observable innerObservable regardless of the source value, and then flattens those resulting Observables into one single Observable, which is the output Observable. Each new innerObservable instance emitted on the output Observable is concatenated with the previous innerObservable instance.

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: concatMapTo is equivalent to mergeMapTo 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 { concatMapTo, take } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');
const result = clicks.pipe(
  concatMapTo(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

concatMapTo(observable: O): OperatorFunction<any, ObservedValueOf<O>>

Parameters

observable

Type: O.

Returns

OperatorFunction<any, ObservedValueOf<O>>

concatMapTo(observable: O, resultSelector: undefined): OperatorFunction<any, ObservedValueOf<O>>

Parameters

observable	Type: O.
resultSelector	Type: undefined.

Returns

OperatorFunction<any, ObservedValueOf<O>>

concatMapTo(observable: O, resultSelector: (outerValue: T, innerValue: ObservedValueOf<O>, outerIndex: number, innerIndex: number) => R): OperatorFunction<T, R>

Parameters

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

Returns

OperatorFunction<T, R>

See Also

• concat
• concatAll
• concatMap
• mergeMapTo
• switchMapTo