AndrWeisR/RxJs Merge Example.md

## index.html
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <button id="a">Start A Sequence</button>
    </div>

    <script src="src/index.ts"></script>
  </body>
</html>

## index.ts
import { fromEvent, interval } from "rxjs";
import { map, mergeMap, take, concatMap, switchMap } from "rxjs/operators";

const getElem = (id: string): HTMLElement => document.getElementById(id);
const fromClick$ = (id: string) => fromEvent(getElem(id), "click");
const streamA = interval(500).pipe(
  take(10),
  map((val) => "A" + val)
);

// When the button is clicked, start emitting a sequence of 10 values, A0,A1,A2 etc.
// mergeMap will merge multiple streams, so you get interleaved "A" values every time you click.
// concatMap will only start emitting values after the previous sequence has completed.
// switchMap will start emitting a new sequence after each click.
const a$ = fromClick$("a").pipe(
  // mergeMap((_) => streamA)
  concatMap((_) => streamA)
  // switchMap((_) => streamA)
);

a$.subscribe(console.log);

## RxJs Merge Example.md

      
    Raw
  

              RxJs Merge Example.md
            
          
    Example that demonstrates the differences between mergeMap, concatMap and switchMap.
Click the button to create an observable that emits 10 values in sequence, A0,A1,A2 etc.

mergeMap will merge multiple streams, so you get interleaved "A" values every time you click.
concatMap will only start emitting values after the previous sequence has completed.
switchMap will start emitting a new sequence after each click.

Code sandbox: https://codesandbox.io/s/rxjs-merge-examples-4wffj?file=/index.html:0-236
	<html>
	<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
	</head>

	<body>
	<div id="app">
	<button id="a">Start A Sequence</button>
	</div>

	<script src="src/index.ts"></script>
	</body>
	</html>
	import { fromEvent, interval } from "rxjs";
	import { map, mergeMap, take, concatMap, switchMap } from "rxjs/operators";

	const getElem = (id: string): HTMLElement => document.getElementById(id);
	const fromClick$ = (id: string) => fromEvent(getElem(id), "click");
	const streamA = interval(500).pipe(
	take(10),
	map((val) => "A" + val)
	);

	// When the button is clicked, start emitting a sequence of 10 values, A0,A1,A2 etc.
	// mergeMap will merge multiple streams, so you get interleaved "A" values every time you click.
	// concatMap will only start emitting values after the previous sequence has completed.
	// switchMap will start emitting a new sequence after each click.
	const a$ = fromClick$("a").pipe(
	// mergeMap((_) => streamA)
	concatMap((_) => streamA)
	// switchMap((_) => streamA)
	);

	a$.subscribe(console.log);