RxJS Presentation

Examples

Range - increment and use operators like take, filter, map

Simple example rxjs with no operators

rxjs.range(1, 200)
  .pipe(
      // ...
  )
  .subscribe(x => console.log('output:', x));

Console output

output: 1
output: 2
output: 3
...
output: 200

Click event - with operators takeUntil

Simple example rxjs with no operators

rxjs.fromEvent(buttonGo, 'click')
  .pipe(
      // ...
  )
  .subscribe((e) => console.log('MOUSE CLICKS', e.clientX, e.clientY));

Console output

MOUSE CLICKS 28 26
MOUSE CLICKS 18 16
MOUSE CLICKS 12 16
MOUSE CLICKS 29 16

Mouse movement - with operators filter, throttleTime, map

Simple example rxjs with no operators

rxjs.fromEvent(document, 'mousemove')
  .pipe(
      // ...
  )
  .subscribe((e) => console.log('MOUSE MOVEMENTS', e.x, e.y));

Console output

MOUSE MOVEMENTS 501 571
MOUSE MOVEMENTS 733 362
MOUSE MOVEMENTS 749 164

Subject

Simple example rxjs with no operators

const subject = new rxjs.Subject();
subject.subscribe((e) => console.log('Subject Subscription 1', e));
subject.subscribe((e) => console.log('Subject Subscription 2', e));
subject.subscribe((e) => console.log('Subject Subscription 3', e));
subject.next('Message 1');

Console output

Subject Subscription 1 Message 1
Subject Subscription 2 Message 1
Subject Subscription 3 Message 1

Behavior Subject

Simple example rxjs with no operators

const behaviorSubject = new rxjs.BehaviorSubject('Message');
behaviorSubject.subscribe((e) => console.log('Behaviour Subject Subscription 1', e));
behaviorSubject.subscribe((e) => console.log('Behaviour Subject Subscription 2', e));
behaviorSubject.next('Message 1');
behaviorSubject.next('Message 2');
behaviorSubject.subscribe((e) => console.log('Behaviour Subject Subscription 3', e));

Console output

Behaviour Subject Subscription 1 Message
Behaviour Subject Subscription 2 Message
Behaviour Subject Subscription 1 Message 1
Behaviour Subject Subscription 2 Message 1
Behaviour Subject Subscription 1 Message 2
Behaviour Subject Subscription 2 Message 2
Behaviour Subject Subscription 3 Message 2

Replay Subject

Simple example rxjs with no operators

const replaySubject = new rxjs.ReplaySubject(3);
replaySubject.subscribe((e) => console.log('Replay Subject Subscription 1', e));
replaySubject.subscribe((e) => console.log('Replay Subject Subscription 2', e));
replaySubject.next('Message 1');
replaySubject.next('Message 2');
replaySubject.next('Message 3');
replaySubject.next('Message 4');
replaySubject.subscribe((e) => console.log('Replay Subject Subscription 3', e));

Console output

Replay Subject Subscription 1 Message 1
Replay Subject Subscription 2 Message 1
Replay Subject Subscription 1 Message 2
Replay Subject Subscription 2 Message 2
Replay Subject Subscription 1 Message 3
Replay Subject Subscription 2 Message 3
Replay Subject Subscription 1 Message 4
Replay Subject Subscription 2 Message 4
Replay Subject Subscription 3 Message 2
Replay Subject Subscription 3 Message 3
Replay Subject Subscription 3 Message 4