concatMapTo

concatMapTo accept a project function as argument like concatMap operator, when source observable emit some value will call this projected observable and emit value of projected observable, only will emit next sequence of observable if before is completed.

this project argument should return finished observable stream, see the last example

the difference between concatMapTo and concatMap, is concatMap operator can intercept emit value of source observable

Example: concatMapTo Operator

import { interval, timer } from 'rxjs';
import { concatMapTo, take, mapTo } from 'rxjs/operators';

const source$ = timer(0, 3000).pipe(mapTo('💥'), take(4));
const projection$ = interval(1000).pipe(take(4)); // should be finished observable stream

const result$ = source$.pipe(concatMapTo(projection$));

Example: with mouse click

import { interval, fromEvent } from 'rxjs';
import { concatMapTo, take } from 'rxjs/operators';
 
const click$ = fromEvent(document, 'click');
const interval$ = interval(500).pipe(take(3)); // should be finished observable stream

const result$ = click$.pipe(concatMapTo(interval$));

Example: ⚠️ Wrong Use ⚠️

you can see the reulst$ will not emit anything because the project Observable is not finished

import { interval, fromEvent } from 'rxjs';
import { concatMapTo } from 'rxjs/operators';
 
const click$ = fromEvent(document, 'click');
const interval$ = interval(1000); // this observable is not completed

const result$ = click$.pipe(concatMapTo(interval$));

Official Doc: rxjs.concatMapTo