mergeMap

mergeMap Operator allows the source observable merge with other observable, and project new values for each emitted value

Example: mergeMap operator simple use

import { interval } from 'rxjs';
import { mergeMap, map, take } from 'rxjs/operators';

const numberToAlphabet = (n) => String.fromCharCode(97+n);

const source$ = interval(2000);
const interval$ = interval(500).pipe(take(3), map(numberToAlphabet))
const result = source$.pipe(
  mergeMap(x => interval$.pipe(map(i => x+i))),
  // project new value merge value of 2 observables
);

Example: with mouse click

import { interval, fromEvent } from 'rxjs';
import { mergeMap, map } from 'rxjs/operators';
 
const source$ = fromEvent(document, 'click');
const interval$ = interval(1000)
const result = source$.pipe(
  mergeMap(x => 
    interval$.pipe(map(i => x+i))
  ),
);

Official Doc: rxjs.mergeMap