[RxJS] Stopping a Stream with TakeUntil

Posted 2020-06-20 Answer1215

Observables often need to be stopped before they are completed. This lesson shows how to use takeUntil to stop a running timer. Then we use the starting stream and the stopping stream together to create a simple stopwatch.

 

const Observable = Rx.Observable;

const startButton = document.querySelector(‘#start‘);
const stopButton = document.querySelector(‘#stop‘);

const start$ = Observable.fromEvent(startButton, ‘click‘);
const interval$ = Observable.interval(1000);
const stop$ = Observable.fromEvent(stopButton, ‘click‘);

const intervalThatStops$ = interval$
    .takeUntil(stop$);

start$
    .switchMapTo(intervalThatStops$)
    .subscribe((x)=> console.log(x));