CombineLatest

Combines multiple Observables to create an Observable whose values are calculated from the latest values of each of its input Observables.

Syntax

combineLatest<O extends ObservableInput<any>, R>(...args: any[]): Observable<R> | Observable<ObservedValueOf<O>[]>

Parameters	Description
args	Type: any[].

Returns

Observable | Observable<ObservedValueOf[]>: An Observable of projected values from the most recent values from each input Observable, or an array of the most recent values from each input Observable.

Example

Combine a dictionary of Observables

import { combineLatest, of } from 'rxjs';
import { delay, startWith } from 'rxjs/operators';
 
const observables = {
  a: of(1).pipe(delay(1000), startWith(0)),
  b: of(5).pipe(delay(5000), startWith(0)),
  c: of(10).pipe(delay(10000), startWith(0))
};
const combined = combineLatest(observables);
combined.subscribe(value => console.log(value));
// Logs
// {a: 0, b: 0, c: 0} immediately
// {a: 1, b: 0, c: 0} after 1s
// {a: 1, b: 5, c: 0} after 5s
// {a: 1, b: 5, c: 10} after 10s

Combine an array of Observables

import { combineLatest, of } from 'rxjs';
import { delay, startWith } from 'rxjs/operators';
 
const observables = [1, 5, 10].map(
  n => of(n).pipe(
    delay(n * 1000),   // emit 0 and then emit n after n seconds
    startWith(0),
  )
);
const combined = combineLatest(observables);
combined.subscribe(value => console.log(value));
// Logs
// [0, 0, 0] immediately
// [1, 0, 0] after 1s
// [1, 5, 0] after 5s
// [1, 5, 10] after 10s