concatMap

concatMap accept a project function as argument, when source observable emit some value will call this projected observable

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

Example:

import { interval } from 'rxjs';
import { concatMap, take } from 'rxjs/operators';
 
const source$ = interval(3000);
const interval$ = interval(500).pipe(take(3)); // should be finished observable stream

const result$ = source$.pipe(concatMap(ev => interval$));

Example: with mouse click

import { fromEvent, interval } from 'rxjs';
import { concatMap, take } from 'rxjs/operators';
 
const click$ = fromEvent(document, 'click');
const interval$ = interval(1000).pipe(take(3));

const result$ = click$.pipe(concatMap(ev => interval$));

Example: ⚠️⚠️⚠️ Wrong use ⚠️⚠️⚠️

the project observable should complete the stream

import { fromEvent, interval } from 'rxjs';
import { concatMap } from 'rxjs/operators';
 
const click$ = fromEvent(document, 'click');
const interval$ = interval(1000); // without completing the stream

const result$ = click$.pipe(concatMap(ev => interval$));

Official Doc: rxjs.concatMap