combineLatest and forkJoin for combining in Angular - Step-by-Step Execution

Concept Flow - combineLatest and forkJoin for combining

Start Observables

↓

combineLatest waits for all to emit at least once

↓

combineLatest emits new combined values on any source emit

↓

forkJoin waits for all to complete

↓

forkJoin emits combined last values once

↓

Complete

combineLatest emits combined latest values whenever any source emits after all have emitted once; forkJoin waits for all sources to complete and emits combined last values once.

Execution Sample

Angular

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

const obs1 = of(1, 2);
const obs2 = of('A', 'B');

combineLatest([obs1, obs2]).subscribe(console.log);
forkJoin([obs1, obs2]).subscribe(console.log);

Shows how combineLatest emits on each new value after all emit once, while forkJoin emits once after all complete.

Execution Table

Step	Observable Emitted	combineLatest Output	forkJoin Output	Notes
1	obs1 emits 1	No output (waiting for obs2)	No output (waiting for completion)	combineLatest waits for all to emit at least once
2	obs2 emits 'A'	[1, 'A']	No output (waiting for completion)	combineLatest emits combined first values
3	obs1 emits 2	[2, 'A']	No output (waiting for completion)	combineLatest emits new combined value
4	obs2 emits 'B'	[2, 'B']	No output (waiting for completion)	combineLatest emits new combined value
5	obs1 completes	No output	No output (waiting for obs2 to complete)	forkJoin waits for all to complete
6	obs2 completes	No output	[2, 'B']	forkJoin emits combined last values once
7	Complete	Complete	Complete	Both streams complete

💡 Both observables complete, forkJoin emits combined last values once, combineLatest has emitted on each new value after initial emissions.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
obs1 value	none	1	1	2	2	2	2	completed
obs2 value	none	none	'A'	'A'	'B'	'B'	'B'	completed
combineLatest output	none	none	[1, 'A']	[2, 'A']	[2, 'B']	[2, 'B']	[2, 'B']	completed
forkJoin output	none	none	none	none	none	none	[2, 'B']	completed

Key Moments - 3 Insights

Why does combineLatest not emit when only one observable emits initially?

combineLatest waits until all observables have emitted at least once before emitting combined values, as shown in step 1 where obs1 emits but no output occurs until obs2 emits in step 2.

Why does forkJoin emit only once at the end?

forkJoin waits for all observables to complete and then emits a single combined array of their last emitted values, as seen in step 6 after both obs1 and obs2 complete.

Can combineLatest emit multiple times while forkJoin emits only once?

Yes, combineLatest emits every time any source emits after all have emitted once (steps 2, 3, 4), but forkJoin emits only once after all complete (step 6).

Visual Quiz - 3 Questions

Look at the execution table, what is the combineLatest output at step 3?

A [2, 'A']

B [1, 'B']

C [2, 'B']

D No output

💡 Hint

Check the 'combineLatest Output' column at step 3 in the execution table.

At which step does forkJoin emit its combined output?

A Step 2

B Step 4

C Step 6

D Step 3

💡 Hint

Look at the 'forkJoin Output' column in the execution table to find when it first emits.

If obs2 never emits, what would combineLatest do?

A Emit combined values immediately

B Never emit any value

C Emit only obs1 values

D Emit last value on completion

💡 Hint

Refer to the key moment about combineLatest waiting for all observables to emit at least once.

Concept Snapshot

combineLatest waits for all observables to emit once, then emits combined latest values on any new emission.
forkJoin waits for all observables to complete, then emits combined last values once.
Use combineLatest for continuous updates, forkJoin for final combined results.
Both return arrays of latest values from sources.
combineLatest emits multiple times; forkJoin emits once.

Full Transcript

This visual execution shows how combineLatest and forkJoin work in Angular. combineLatest waits until all observables have emitted at least once, then emits combined latest values every time any observable emits a new value. forkJoin waits for all observables to complete, then emits a single combined array of their last emitted values. The execution table traces emissions step-by-step, showing combineLatest emitting multiple times and forkJoin emitting once at the end. Variable tracking shows the values each observable emits and the outputs produced. Key moments clarify common confusions, such as why combineLatest waits for all to emit before output and why forkJoin emits only once after completion. The quiz tests understanding of these behaviors by referencing specific steps in the execution. The snapshot summarizes the key differences and usage of combineLatest and forkJoin for combining observables in Angular.