W3cubDocs

/RxJS

concatMapTo

function stable

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<any>>(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>: 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.

concatMapTo marble diagram

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<T, ObservedValueOf<O>>

Parameters

observable

Type: O.

Returns

OperatorFunction<T, ObservedValueOf<O>>

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

Parameters

observable

Type: O.

resultSelector

Type: undefined.

Returns

OperatorFunction<T, 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

© 2015–2018 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/concatMapTo