Angular Academy · Lesson

Combination Operators

Combine streams with combineLatest and forkJoin.

Combination Operators is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why combine streams

Real apps coordinate multiple async sources: several HTTP calls, a form value plus a filter, a click plus the latest state. Combination operators merge multiple observables into one.

combineLatest

combineLatest emits an array of the latest value from each source whenever any source emits — after all have emitted at least once.

import { combineLatest } from 'rxjs';

combineLatest([name$, age$]).subscribe(
  ([name, age]) => console.log(name, age)
);
// re-emits whenever name$ OR age$ changes

combineLatest use case

Great for derived UI state: combine a search term and a category filter to produce a query.

combineLatest([term$, category$]).pipe(
  switchMap(([term, cat]) =>
    this.http.get('/api?q=' + term + '&cat=' + cat))
).subscribe(results => console.log(results));

forkJoin

forkJoin waits for all sources to complete, then emits one array of their last values. It is the RxJS equivalent of Promise.all.

import { forkJoin } from 'rxjs';

forkJoin({
  user: this.http.get('/api/user'),
  posts: this.http.get('/api/posts')
}).subscribe(({ user, posts }) => {
  console.log(user, posts);
});

forkJoin caveat

forkJoin emits nothing if any source never completes (like an interval) or errors before completing. Use it for finite sources such as HTTP requests.

merge

merge flattens multiple observables into one, emitting values as they arrive from any source, with no pairing.

import { merge } from 'rxjs';

merge(clicks$, keypresses$).subscribe(
  event => console.log('event', event)
);
// emits whenever either source emits

zip

zip pairs values by index: it emits the 1st of each, then the 2nd of each, and so on. It waits for all sources to produce the next value.

import { zip, of } from 'rxjs';

zip(of(1, 2, 3), of('a', 'b', 'c'))
  .subscribe(([n, l]) => console.log(n, l));
// [1,a], [2,b], [3,c]

startWith

startWith prepends an initial value, useful so combineLatest can emit before every source has fired.

import { startWith } from 'rxjs';

combineLatest([
  term$.pipe(startWith('')),
  category$.pipe(startWith('all'))
]).subscribe(([t, c]) => console.log(t, c));

withLatestFrom

withLatestFrom emits only when the source emits, attaching the latest values from the other observables. The source drives, the others are passive.

import { withLatestFrom } from 'rxjs';

saveClick$.pipe(
  withLatestFrom(formValue$)
).subscribe(([_, form]) => this.save(form));

concat for sequential streams

concat subscribes to each source in order, moving to the next only after the current one completes. Use it when you need streams to run strictly one after another.

import { concat, of } from 'rxjs';

concat(of(1, 2), of(3, 4))
  .subscribe(v => console.log(v));
// 1, 2, 3, 4 (second starts after first completes)

combineLatest vs forkJoin vs zip

combineLatest: latest of each, on any emission.
forkJoin: last of each, once all complete.
zip: paired by index.
Pick based on whether you need ongoing updates, a one-time join, or strict pairing.

Quick Check

Test your understanding of combination operators.

Recap: Combination Operators

Combination operators coordinate multiple streams.

combineLatest: latest of each on any emit.
forkJoin: join on completion (Promise.all-like).
merge: interleave all emissions.
withLatestFrom: source-driven snapshot of others.

Next: error handling operators.

Frequently asked questions

Is the “Combination Operators” lesson free?

Yes — the full text of “Combination Operators” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Combination Operators”?

Combine streams with combineLatest and forkJoin. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Combination Operators” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy