RxJS Cheatsheet

1// SetTimeout with auto unsubscribe
2this.observable = Rx.Observable.interval(1000);
3this.observable$.pipe(first())
4.subscribe(x => console.log(x));
5
6// Timer
7import { Subscription, interval, BehaviorSubject, Observable } from 'rxjs';
8this.sub = interval(2000)
9  .subscribe(() => {
10    // ...
11});
12
13// Expose Subjects as Observables
14export class ExampleComponent {
15  private drawerTriggerSubject = new Subject<{}>(); 
16  public drawerTrigger$: Observable<{}> = this.drawerTriggerSubject;
17}
18
19// AsyncPipe Filtering
20 this.metrics$ = this.abstractService.viewFieldSubjectObs$.pipe(filter(x => x.group === ViewFieldTypes.METRIC && x.presentationType !== null))
21
22
23/** TakeWhile
24* https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/takewhile.md
25**/
26import { Observable } from 'rxjs/Observable';
27Observable.interval(10000)
28.takeWhile(() => !stopCondition)
29.subscribe(i => {
30  // This will be called every 10 seconds until `stopCondition` flag is set to true
31})
32
33// Example
34function animate() {
35  let scaleOut = false;
36  let loopTimes = 0;
37  Observable.interval(250)
38  .takeWhile(() => loopTimes < 2)
39  .subscribe(i => {
40    if (scaleOut) {
41      this.renderer.removeClass(this.hostElement.nativeElement, 'scale-out');
42      this.renderer.addClass(this.hostElement.nativeElement, 'scale-in');
43      loopTimes++;
44      scaleOut = false;
45    } else {
46      this.renderer.removeClass(this.hostElement.nativeElement, 'scale-in');
47      this.renderer.addClass(this.hostElement.nativeElement, 'scale-out');
48      loopTimes++;
49      scaleOut = true;
50    }
51  })
52}
53
54// Realtime Search
55searchInput$
56 .pipe(
57  debounceTime(300),
58  map(ev => ev.target.value),
59  switchMap(v => this.apiService.getData(this.computeApiUrl(v))
60).subscribe(() => {...})
61
62// BehaviourSubject
63import { BehaviorSubject, ReplaySubject, Subject, AsyncSubject } from 'rxjs';
64
65const subject = new BehaviorSubject(1);
66
67console.log('xpto', subject.value);
68
69subject.next(144);
70
71console.log('xpto next', subject.value);
72
73setTimeout(() => {
74  console.log('xpto later', subject.value);
75}, 10)
76
77subject.next(155);
78
79setTimeout(() => {
80  subject.next(157);
81  console.log('xpto later x', subject.value);
82}, 10)
83