Observables rxjs recipes

Unsubscribing to observable in Angular

Create a timer with observable

Create a timer that will emit a value every 5000ms.

const timer = Rx.Observable.interval(5000);

js bin example of 2 sources (2 intervals emitters) with the second slower

[Observable] Observable.combineLatest

  • When to use? : You have 2 queries or more. You need to do something depending on of the results of those queries. For example, you need to wait for page params and get the connected user information...

CombineLatest emits an item whenever any of the source Observables emits an item (so long as each of the source Observables has emitted at least one item)

So you have 2 or more async observables, the Observable.combineLatest is called after each emitted their first value, and give the opportunity to a function to remit a item with the value of the last emitted item

[Subject] Behavior subject

A variable that is changed using next() and "watched" using subscribe

[Operator] map

import 'rxjs/add/operator/map';

Allow to change the value of each emitted items before it is sent to function subscribing to it.

[Operator] flatmap

Mind that in JS the name is not flatmap ! Look at flatmap official docflatmap.html

[Operator] do

import 'rxjs/add/operator/do';

Learn RXJS doc on do

  • When to use? : To perform an action like logging that do not transform the observable result

[Operator] catch

import 'rxjs/add/operator/catch';

Learn RXJS doc on catch

  • When to use? : to catch error, return an observable with the error information

[Operator] take

import 'rxjs/add/operator/take';

  • When to use? : When you want to limit the number of returned elements. For example take only the 5 first elements of a stream of observable.

    Learn RXJS doc on take

[Filter] filter

  • When to use? : Select the condition to receive a given observable, for example you want to make an API call only if the parameters are available

Learn RXJS on filter

[Operator] withLatestFrom

import 'rxjs/add/operator/withLatestFrom';

  • When to use? Combine 2 sources with the latest emitted version for the second source. withLatestFrom is generally followed by a map where the 2 sources results .map([source1, source2) => { //handle 2 sources } can be manipulated

Learn RXJS doc on withlatestfrom

[Operator] exhaustMap

  • When to use?: Map values to inner observable and stop emitting value until inner observable map finish (=exhaust)

    this.actions$.ofType(Auth.LOGIN)
  .map((action: Auth.Login) => action.payload)
  .withLatestFrom(this.geolocationService.refreshLocation())
  // auth and geo are mapped to inner observable (sub-observable)
  // if new values are emitted but  inner observable are not completed
  // they won't be mapped again
  .exhaustMap(([auth, geo]) => this.authService.login(auth, geo)
      .map(loginAuth => new Auth.LoginSuccess({ auth: loginAuth }))
      .catch(error => of(new Auth.LoginFailure(error)))
  );

    Learn RXJS doc on exhaustMap

[Function] pipe method

https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44

Pipe method is available from Rxjs 5.5

Return an observable when another observable emit a value

this.closeEditing$ 
.pipe(switchMap(() => this.lines$))
.subscribe(lines => {

PreviousMock API and sandboxNextCombination operators

Last updated