Observables rxjs recipes

PreviousMock API and sandbox NextCombination operators

Last updated 4 years ago

Was this helpful?

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);

[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

When to use? : When we need to keep an updatable value (for example the connected user) and get all components updated when this value change

[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

[Operator] do

import 'rxjs/add/operator/do';

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

[Operator] catch

import 'rxjs/add/operator/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.

[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

[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

[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)))
  );

[Function] pipe method

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 sandbox NextCombination operators

Last updated 4 years ago

Was this helpful?