Zip

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

Description

If the last parameter is a function, this function is used to compute the created value from the input values. Otherwise, an array of the input values is returned.

import { zip, of } from 'rxjs';
import { map } from 'rxjs/operators';

let age$ = of<number>(27, 25, 29);
let name$ = of<string>('Foo', 'Bar', 'Beer');
let isDev$ = of<boolean>(true, true, false);

zip(age$, name$, isDev$).pipe(
  map(([age, name, isDev]) => ({ age, name, isDev })),
)
.subscribe(x => console.log(x));

// outputs
// { age: 27, name: 'Foo', isDev: true }
// { age: 25, name: 'Bar', isDev: true }
// { age: 29, name: 'Beer', isDev: false }

Example #2

public populateDependencies(): void {
  const statusObservable$ = this.statusSrv.getStatusList();
  const categoryObservable$ = this.categorySrv.getMyCategories(false);
  const mergedObservables$ =
    zip(
      statusObservable$,
      categoryObservable$
    );

  mergedObservables$
    .pipe(
      map(([status, categories]: [Status[], Category[]]) => {
        this.status = status;
        this.categories = categories;
      })
    ).subscribe();
}