merge

signature: merge(input: Observable): Observable

Turn multiple observables into a single observable.

:bulb: This operator can be used as either a static or instance method!

:bulb: If order not throughput is a primary concern, try concat instead!

Examples

Example 1: merging multiple observables, static method

( StackBlitz | jsBin | jsFiddle )

// RxJS v6+
import { mapTo } from 'rxjs/operators';
import { interval, merge } from 'rxjs';

//emit every 2.5 seconds
const first = interval(2500);
//emit every 2 seconds
const second = interval(2000);
//emit every 1.5 seconds
const third = interval(1500);
//emit every 1 second
const fourth = interval(1000);

//emit outputs from one observable
const example = merge(
  first.pipe(mapTo('FIRST!')),
  second.pipe(mapTo('SECOND!')),
  third.pipe(mapTo('THIRD')),
  fourth.pipe(mapTo('FOURTH'))
);
//output: "FOURTH", "THIRD", "SECOND!", "FOURTH", "FIRST!", "THIRD", "FOURTH"
const subscribe = example.subscribe(val => console.log(val));

Example 2: merge 2 observables, instance method

( StackBlitz | jsBin | jsFiddle )

// RxJS v6+
import { merge } from 'rxjs/operators';
import { interval } from 'rxjs';

//emit every 2.5 seconds
const first = interval(2500);
//emit every 1 second
const second = interval(1000);
//used as instance method
const example = first.pipe(merge(second));
//output: 0,1,0,2....
const subscribe = example.subscribe(val => console.log(val));

Related Recipes

• Battleship Game
• Flappy Bird Game
• HTTP Polling
• Lockscreen
• Memory Game
• [Save Indicator]('../../recipes/save-indicator.md)

Additional Resources

• merge

  :newspaper: - Official docs

• Handling multiple streams with merge

  :video_camera: :dollar: - John Linquist

• Sharing network requests with merge

  :video_camera: :dollar: - André Staltz

• Combination operator: merge

  :video_camera: :dollar: - André Staltz

• Build your own merge operator

  :video_camera: - Kwinten Pisman

:file_folder: Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/merge.ts