💡 If you only need a specific number of values, try take!
Example 1: Take values until timer emits
( StackBlitz | jsBin | jsFiddle )
// RxJS v6+import { interval, timer } from 'rxjs';import { takeUntil } from 'rxjs/operators';//emit value every 1sconst source = interval(1000);//after 5 seconds, emit valueconst timer$ = timer(5000);//when timer emits after 5s, complete sourceconst example = source.pipe(takeUntil(timer$));//output: 0,1,2,3const subscribe = example.subscribe(val => console.log(val));
Example 2: Take the first 5 even numbers
( StackBlitz | jsBin | jsFiddle )
// RxJS v6+import { interval } from 'rxjs/observable/interval';import { takeUntil, filter, scan, map, withLatestFrom } from 'rxjs/operators';//emit value every 1sconst source = interval(1000);//is number even?const isEven = val => val % 2 === 0;//only allow values that are evenconst evenSource = source.pipe(filter(isEven));//keep a running total of the number of even numbers outconst evenNumberCount = evenSource.pipe(scan((acc, _) => acc + 1, 0));//do not emit until 5 even numbers have been emittedconst fiveEvenNumbers = evenNumberCount.pipe(filter(val => val > 5));const example = evenSource.pipe(//also give me the current even number count for displaywithLatestFrom(evenNumberCount),map(([val, count]) => `Even number (${count}) : ${val}`),//when five even numbers have been emitted, complete source observabletakeUntil(fiveEvenNumbers));/*Even number (1) : 0,Even number (2) : 2Even number (3) : 4Even number (4) : 6Even number (5) : 8*/const subscribe = example.subscribe(val => console.log(val));
Example 3: Take mouse events on mouse down until mouse up
( StackBlitz )
// RxJS v6+import { fromEvent } from 'rxjs';import { takeUntil, mergeMap, map } from 'rxjs/operators';const mousedown$ = fromEvent(document, 'mousedown');const mouseup$ = fromEvent(document, 'mouseup');const mousemove$ = fromEvent(document, 'mousemove');// after mousedown, take position until mouse upmousedown$.pipe(mergeMap(_ => {return mousemove$.pipe(map((e: any) => ({x: e.clientX,y: e.clientY})),// complete inner observable on mouseup eventtakeUntil(mouseup$));})).subscribe(console.log);
takeUntil 📰 - Official docs
Avoiding takeUntil leaks - Angular in Depth
Stopping a stream with takeUntil 🎥 💵 - John Linquist
Build your own takeUntil operator 🎥 - Kwinten Pisman
📁 Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeUntil.ts