Angular — Observables

What are Observables?

Observables are lazy collections of multiple values over time.

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.next('World');
  subscriber.complete();
});

observable.subscribe(value => console.log(value));

Common Operators

import { map, filter, switchMap, mergeMap } from 'rxjs/operators';

// map
this.http.get('/api/users').pipe(
  map(users => users.filter(u => u.active))
);

// filter
this.searchControl.valueChanges.pipe(
  filter(value => value.length > 2)
);

// switchMap
this.searchControl.valueChanges.pipe(
  switchMap(value => this.http.get(`/api/search?q=${value}`))
);

BehaviorSubject

import { BehaviorSubject } from 'rxjs';

const userSubject = new BehaviorSubject<any>(null);
const user$ = userSubject.asObservable();

userSubject.next({ name: 'John' });

Async Pipe

<div *ngIf="users$ | async as users">
  <div *ngFor="let user of users">
    {{user.name}}
  </div>
</div>

Unsubscribing

// Using takeUntil
private destroy$ = new Subject<void>();

ngOnInit() {
  this.data$.pipe(takeUntil(this.destroy$)).subscribe();
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Mini Practice

1. Create an observable
2. Use common operators
3. Use BehaviorSubject
4. Subscribe with async pipe

Up Next

Continue with RxJS — reactive programming in depth.