Understanding RxJS/ Observables

Understand Observables and how to use them

by jpeter06

HTML

<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js"></script>

<p>Combined value: <span></span></p>

JavaScript

var span = document.querySelector('span');

const mouseDown$ = Rx.Observable.fromEvent<MouseEvent>(document, 'mousedown');
const mouseMove$ = Rx.Observable.fromEvent<MouseEvent>(document, 'mousemove');
const mouseUp$ = Rx.Observable.fromEvent<MouseEvent>(document, 'mouseup');

const mouseDrag$ = mouseDown$.switchMap((mde) => {
      return mouseMove$.pipe(
        map((mme) => console.log(mme.pageX)),
        takeUntil(mouseUp$)
      );
    });