How to Use combineLatest in RxJS: Syntax and Examples

Use combineLatest from RxJS to combine multiple observables and get their latest emitted values as an array or object whenever any observable emits. It waits for all observables to emit at least once before emitting combined values. This helps synchronize streams in Angular reactive programming.

Syntax

The combineLatest function takes multiple observables as arguments and returns a new observable that emits an array of the latest values from each input observable whenever any of them emits a new value.

You can also provide a projection function to map the combined values into a custom output.

typescript

import { combineLatest, of } from 'rxjs';

const combined$ = combineLatest([
  observable1,
  observable2
]).pipe(
  map(([value1, value2]) => {
    // Optional projection function
    return { value1, value2 };
  })
);

Example

This example shows two observables emitting numbers and letters. combineLatest emits the latest values from both whenever either emits after both have emitted at least once.

typescript

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

const numbers$ = interval(1000).pipe(
  take(3), // emits 0,1,2 every second
  map(n => n + 1) // map to 1,2,3
);

const letters$ = interval(1500).pipe(
  take(3), // emits 0,1,2 every 1.5 seconds
  map(n => String.fromCharCode(65 + n)) // map to 'A','B','C'
);

combineLatest([numbers$, letters$]).subscribe(([num, letter]) => {
  console.log(`Number: ${num}, Letter: ${letter}`);
});

Output

Number: 1, Letter: A
Number: 2, Letter: A
Number: 2, Letter: B
Number: 3, Letter: B
Number: 3, Letter: C

Common Pitfalls

• Waiting for all observables: combineLatest waits until all input observables emit at least once before emitting combined values. If one observable never emits, the combined observable never emits.
• Order of values: The emitted array order matches the order of observables passed in, so keep track of which observable corresponds to which value.
• Unsubscribe properly: Always unsubscribe to avoid memory leaks, especially with infinite observables like interval.

typescript

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

// Wrong: one observable never emits, so combined$ never emits
const obs1$ = of(1);
const obs2$ = NEVER; // never emits
const combined$ = combineLatest([obs1$, obs2$]);
combined$.subscribe(console.log); // No output

// Right: all observables emit
const obs3$ = of(1);
const obs4$ = of('a');
combineLatest([obs3$, obs4$]).subscribe(console.log); // Outputs [1, 'a']

Output

[1, 'a']

Quick Reference

combineLatest Cheat Sheet:

Feature	Description
Input	Multiple observables as an array or arguments
Output	Observable emitting latest values as array or projected result
Emission	Emits after all inputs emit at least once, then on any new emission
Use case	Combine latest values from streams to react together
Unsubscribe	Important to avoid memory leaks

Key Takeaways

combineLatest emits combined latest values only after all observables have emitted once.

The output order matches the order of input observables.

Use a projection function to customize emitted values.

Always unsubscribe from combined observables to prevent memory leaks.

combineLatest is ideal for synchronizing multiple data streams in Angular.