combineLatest

Combines multiple Observables to emit calculated values from the latest values of each

combineLatest

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

Import

import { combineLatest } from 'rxjs';

Type Signature

// Array of Observables
function combineLatest<A extends readonly unknown[]>(
  sources: readonly [...ObservableInputTuple<A>]
): Observable<A>;

// Dictionary of Observables
function combineLatest<T extends Record<string, ObservableInput<any>>>(
  sourcesObject: T
): Observable<{ [K in keyof T]: ObservedValueOf<T[K]> }>;

// With result selector
function combineLatest<A extends readonly unknown[], R>(
  sources: readonly [...ObservableInputTuple<A>],
  resultSelector: (...values: A) => R
): Observable<R>;

Parameters

sources · Array<ObservableInput> | Object · required

Either an array of Observables or an object where values are Observables.

resultSelector · Function

Optional function to transform the combined values before emission.

Returns

Observable · Observable<T>

An Observable that emits:

• An array of latest values (when given an array)
• An object of latest values (when given an object)
• The result of resultSelector (when provided)

Description

combineLatest combines values from multiple Observables. Whenever any input Observable emits, it:

1. Collects the latest value from each Observable
2. Combines them into an array or object
3. Emits the combined result

Key characteristics:

• Waits for ALL Observables to emit at least once before emitting
• Emits every time ANY Observable emits (after initial values)
• Maintains the latest value from each Observable
• Completes only when ALL Observables complete

Examples

Combine Two Timers

import { timer, combineLatest } from 'rxjs';

const firstTimer = timer(0, 1000);  // 0, 1, 2, 3...
const secondTimer = timer(500, 1000); // 0, 1, 2, 3... (starts 500ms later)

const combined = combineLatest([firstTimer, secondTimer]);

combined.subscribe(([first, second]) => {
  console.log(`First: ${first}, Second: ${second}`);
});

// Output:
// First: 0, Second: 0  (at 500ms)
// First: 1, Second: 0  (at 1000ms)
// First: 1, Second: 1  (at 1500ms)
// First: 2, Second: 1  (at 2000ms)
// ...

Combine Dictionary of Observables

import { of, delay, startWith, combineLatest } from 'rxjs';

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

// Output:
// { 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)

Calculate BMI from Weight and Height

import { of, combineLatest, map } from 'rxjs';

const weight$ = of(70, 72, 76, 79, 75);
const height$ = of(1.76, 1.77, 1.78);

const bmi$ = combineLatest([weight$, height$]).pipe(
  map(([w, h]) => w / (h * h))
);

bmi$.subscribe(x => console.log('BMI:', x.toFixed(2)));

// Output:
// BMI: 24.21
// BMI: 23.94
// BMI: 23.67

Common Use Cases

Form Validation

import { combineLatest, map } from 'rxjs';
import { fromEvent } from 'rxjs';

const emailInput = document.querySelector('#email');
const passwordInput = document.querySelector('#password');

const email$ = fromEvent(emailInput, 'input').pipe(
  map((e: any) => e.target.value)
);

const password$ = fromEvent(passwordInput, 'input').pipe(
  map((e: any) => e.target.value)
);

const formValid$ = combineLatest([email$, password$]).pipe(
  map(([email, password]) => {
    return email.includes('@') && password.length >= 8;
  })
);

formValid$.subscribe(valid => {
  const submitButton = document.querySelector('#submit') as HTMLButtonElement;
  submitButton.disabled = !valid;
});

Multiple API Calls

Parallel Requests

import { combineLatest } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';

const user$ = ajax.getJSON('/api/user/1');
const posts$ = ajax.getJSON('/api/user/1/posts');
const comments$ = ajax.getJSON('/api/user/1/comments');

combineLatest([user$, posts$, comments$]).pipe(
  map(([user, posts, comments]) => ({
    ...user,
    postsCount: posts.length,
    commentsCount: comments.length
  }))
).subscribe(profile => {
  console.log('User profile:', profile);
});

Real-time Dashboard

import { combineLatest, interval } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

// Poll different endpoints at different intervals
const metrics$ = interval(5000).pipe(
  switchMap(() => ajax.getJSON('/api/metrics'))
);

const alerts$ = interval(10000).pipe(
  switchMap(() => ajax.getJSON('/api/alerts'))
);

const status$ = interval(2000).pipe(
  switchMap(() => ajax.getJSON('/api/status'))
);

const dashboard$ = combineLatest({
  metrics: metrics$,
  alerts: alerts$,
  status: status$
});

dashboard$.subscribe(data => {
  updateDashboard(data);
});

Filter with Multiple Criteria

import { combineLatest, BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

interface Product {
  name: string;
  category: string;
  price: number;
}

const products: Product[] = [
  { name: 'Laptop', category: 'Electronics', price: 1000 },
  { name: 'Mouse', category: 'Electronics', price: 20 },
  { name: 'Desk', category: 'Furniture', price: 300 }
];

const categoryFilter$ = new BehaviorSubject<string>('all');
const priceFilter$ = new BehaviorSubject<number>(Infinity);
const searchTerm$ = new BehaviorSubject<string>('');

const filteredProducts$ = combineLatest([
  categoryFilter$,
  priceFilter$,
  searchTerm$
]).pipe(
  map(([category, maxPrice, search]) => {
    return products.filter(p => {
      const matchesCategory = category === 'all' || p.category === category;
      const matchesPrice = p.price <= maxPrice;
      const matchesSearch = p.name.toLowerCase().includes(search.toLowerCase());
      return matchesCategory && matchesPrice && matchesSearch;
    });
  })
);

filteredProducts$.subscribe(products => {
  console.log('Filtered products:', products);
});

// Update filters
categoryFilter$.next('Electronics');
priceFilter$.next(500);
searchTerm$.next('lap');

Behavior Details

Waiting for First Emissions

combineLatest will NOT emit until ALL Observables have emitted at least once:

import { combineLatest, timer, NEVER } from 'rxjs';

const fast$ = timer(0, 100);   // Emits immediately and every 100ms
const never$ = NEVER;          // Never emits

combineLatest([fast$, never$]).subscribe(
  x => console.log(x)  // This will NEVER run
);

Completion Behavior

import { combineLatest, of, EMPTY, NEVER } from 'rxjs';
import { delay } from 'rxjs/operators';

// Completes when ALL complete
combineLatest([
  of(1).pipe(delay(100)),
  of(2).pipe(delay(200))
]).subscribe({
  next: x => console.log(x),
  complete: () => console.log('Complete!')  // After 200ms
});

// Never completes if one never completes
combineLatest([
  of(1),
  NEVER
]).subscribe({
  next: x => console.log(x),    // [1, ???] - waits forever
  complete: () => console.log('Complete!')  // Never called
});

// Completes immediately if one completes without emitting
combineLatest([
  of(1),
  EMPTY
]).subscribe({
  next: x => console.log(x),    // Never called
  complete: () => console.log('Complete!')  // Called immediately
});

Performance Considerations

combineLatest emits every time ANY input Observable emits. With many frequently-emitting Observables, this can create performance issues. Consider using debounceTime or throttleTime if needed.

import { combineLatest, fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';

const mouseMove$ = fromEvent(document, 'mousemove');
const scroll$ = fromEvent(document, 'scroll');

// This emits VERY frequently
combineLatest([mouseMove$, scroll$]).subscribe(...);

// Better: debounce the result
combineLatest([mouseMove$, scroll$]).pipe(
  debounceTime(100)
).subscribe(...);

Comparison with Other Operators

combineLatest vs zip: combineLatest uses the latest values, zip waits for corresponding indexed values from each Observable.

combineLatest vs withLatestFrom: combineLatest emits when ANY source emits, withLatestFrom only emits when the primary Observable emits.

combineLatest vs forkJoin: combineLatest emits continuously, forkJoin emits only once when all complete.

Related Operators

• zip - Combine by index position
• forkJoin - Wait for all to complete
• merge - Emit from all concurrently
• withLatestFrom - Sample latest values from other Observables

See Also

• Official RxJS Documentation