combineLatest and forkJoin for combining in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of combineLatest with two observables?

Consider two observables emitting values at different times combined with combineLatest. What will the subscriber receive?

Angular

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

const obs1 = timer(0, 100).pipe(map(x => `A${x}`));
const obs2 = timer(50, 100).pipe(map(x => `B${x}`));

combineLatest([obs1, obs2]).subscribe(values => console.log(values));

A ["A0", "B0"], ["A0", "B1"], ["A1", "B1"], ["A1", "B2"], ...

B ["A0", "B0"], ["A1", "B0"], ["A1", "B1"], ["A2", "B1"], ...

C ["A0"], ["A1"], ["A2"], ["A3"], ...

D ["B0"], ["B1"], ["B2"], ["B3"], ...

💡 Hint

Remember, combineLatest waits for all observables to emit at least once, then emits on any new emission.

combineLatest emits an array of the latest values from each observable whenever any observable emits after all have emitted once.

❓ component_behavior

intermediate

What does forkJoin emit when combining observables?

Given two observables combined with forkJoin, what will the subscriber receive?

Angular

import { forkJoin, of } from 'rxjs';
import { delay } from 'rxjs/operators';

const obs1 = of('X').pipe(delay(100));
const obs2 = of('Y').pipe(delay(200));

forkJoin([obs1, obs2]).subscribe(values => console.log(values));

A ['Y'] immediately, then ['X'] later

B ['X'] immediately, then ['Y'] later

C ['X', 'Y'] after both observables complete

D No output because observables never complete

💡 Hint

forkJoin waits for all observables to complete and emits once.

forkJoin emits an array of the last emitted values from each observable only after all observables complete.

📝 Syntax

advanced

Which option correctly imports and uses combineLatest in Angular?

Identify the correct import and usage of combineLatest from RxJS in Angular.

A

import { combineLatest } from 'rxjs';
combineLatest([obs1, obs2]).subscribe(console.log);

B

import { combineLatest } from 'rxjs/operators';
combineLatest(obs1, obs2).subscribe(console.log);

C

import { combineLatest } from 'rxjs';
combineLatest(obs1, obs2).subscribe(console.log);

D

import { combineLatest } from 'rxjs/operators';
combineLatest([obs1, obs2]).subscribe(console.log);

💡 Hint

Check the correct import path and argument format for combineLatest.

combineLatest is imported from 'rxjs' and takes an array of observables.

🔧 Debug

advanced

Why does forkJoin not emit with a never-ending observable?

Given this code, why does forkJoin never emit?

Angular

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

const obs1 = of('done');
const obs2 = interval(1000);

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

A Because <code>interval</code> never completes, so forkJoin waits forever.

B Because forkJoin only works with synchronous observables.

C Because forkJoin requires at least one observable to error.

D Because <code>of</code> never emits any value.

💡 Hint

Think about when forkJoin emits values.

forkJoin waits for all observables to complete. interval never completes, so forkJoin never emits.

🧠 Conceptual

expert

When to use combineLatest vs forkJoin in Angular?

Which statement best describes when to use combineLatest versus forkJoin?

A <code>combineLatest</code> waits for all observables to complete; <code>forkJoin</code> emits on any new value.

B <code>combineLatest</code> merges values into one observable; <code>forkJoin</code> splits values into multiple observables.

C <code>combineLatest</code> only works with synchronous observables; <code>forkJoin</code> works with asynchronous only.

D <code>combineLatest</code> emits on any new value after all observables emit once; <code>forkJoin</code> emits once after all complete.

💡 Hint

Think about emission timing and completion requirements.

combineLatest emits whenever any source emits after all have emitted once. forkJoin waits for all to complete and emits once.

Practice

1. What is the main difference between combineLatest and forkJoin in Angular RxJS?

easy

A. combineLatest and forkJoin behave exactly the same.

B. combineLatest waits for all sources to complete; forkJoin emits on every source emission.

C. combineLatest emits values whenever any source emits; forkJoin emits once when all sources complete.

D. combineLatest only emits once; forkJoin emits multiple times.

Solution

1. Step 1: Understand combineLatest behavior

   combineLatest emits a new combined value whenever any source observable emits after all have emitted at least once.

2. Step 2: Understand forkJoin behavior

   forkJoin waits for all source observables to complete and then emits a single combined array of their last emitted values.

3. Final Answer:

   combineLatest emits on any change; forkJoin emits once after all complete. -> Option C

4. Quick Check:

   combineLatest = live updates, forkJoin = final result [OK]

Hint: combineLatest updates live; forkJoin waits for all done [OK]

Common Mistakes:

• Thinking forkJoin emits multiple times
• Confusing combineLatest with forkJoin completion behavior
• Assuming combineLatest waits for all to complete

2. Which of the following is the correct syntax to import combineLatest and forkJoin from RxJS in Angular?

easy

A. import { combineLatest, forkJoin } from 'rxjs/operators';

B. import { combineLatest, forkJoin } from 'rxjs';

C. import { combineLatest, forkJoin } from '@angular/core';

D. import { combineLatest, forkJoin } from 'rxjs/internal';

Solution

1. Step 1: Identify correct RxJS import path

   Both combineLatest and forkJoin are exported from the main 'rxjs' package, not from Angular core or operators.

2. Step 2: Verify common incorrect imports

   @angular/core is Angular framework code, rxjs/operators contains operators like map, filter, but not these combinators.

3. Final Answer:

   import { combineLatest, forkJoin } from 'rxjs'; -> Option B

4. Quick Check:

   RxJS combinators import from 'rxjs' [OK]

Hint: Import from 'rxjs' for combineLatest and forkJoin [OK]

Common Mistakes:

• Importing from 'rxjs/operators' instead of 'rxjs'
• Importing from '@angular/core' by mistake
• Using internal RxJS paths which are not public API

3. Given the following code, what will be logged to the console?

import { of, combineLatest } from 'rxjs';

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

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

medium

A. [1, 'A'], [2, 'A'], [2, 'B']

B. No output because observables complete immediately

C. [1, 'A'], [1, 'B'], [2, 'B']

D. [2, 'A'], [2, 'B']

Solution

1. Step 1: Understand of observables emitting synchronously

   Both obs1 and obs2 emit their values immediately and complete. obs1 emits 1 then 2; obs2 emits 'A' then 'B'.

2. Step 2: Analyze combineLatest with synchronous emissions

   combineLatest waits for all to emit at least once, then emits combined latest values on any emission. Since subscriptions are synchronous, obs1 emits both values first (latest from obs1 is 2), then obs2 emits 'A' (triggers [2, 'A']), then 'B' (triggers [2, 'B']).

3. Final Answer:

   [2, 'A'], [2, 'B'] -> Option D

4. Quick Check:

   Synchronous combineLatest: last of first + all of second [OK]

Hint: Synchronous combineLatest with of(): last of first + all of second [OK]

Common Mistakes:

• Thinking combineLatest emits only the final values once (forkJoin behavior)
• Thinking combineLatest emits all intermediate pairs
• Assuming no output because of immediate completion

4. Identify the error in this Angular RxJS code using forkJoin:

import { forkJoin, of } from 'rxjs';

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

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

medium

A. No error; code works and logs [2, 'B']

B. forkJoin requires observables to emit only once; multiple emissions cause error

C. forkJoin does not accept an array of observables

D. forkJoin emits on every emission, so output is multiple arrays

Solution

1. Step 1: Check forkJoin input and behavior

   forkJoin accepts an array of observables and waits for all to complete, then emits an array of their last emitted values.

2. Step 2: Verify observables emitting multiple values

   Observables emitting multiple values are allowed; forkJoin only emits after completion with last values. Here, obs1 emits 1 then 2, obs2 emits 'A' then 'B'. forkJoin emits [2, 'B'] once.

3. Final Answer:

   No error; code works and logs [2, 'B'] -> Option A

4. Quick Check:

   forkJoin waits for last values, no error [OK]

Hint: forkJoin accepts arrays and emits last values after completion [OK]

Common Mistakes:

• Thinking forkJoin errors on multiple emissions
• Believing forkJoin emits multiple times
• Assuming forkJoin cannot take arrays

5. You have two HTTP calls in Angular returning observables: getUser() and getOrders(). You want to display user info immediately and update orders live as they change. Which combination should you use?

hard

A. Use forkJoin for getUser() and combineLatest for getOrders() to combine results.

B. Use forkJoin to wait for both HTTP calls to complete before displaying anything.

C. Use combineLatest on both observables to get live updates for user and orders.

D. Use combineLatest for getUser() and forkJoin for getOrders() to combine results.

Solution

1. Step 1: Understand HTTP observables behavior

   HTTP calls like getUser() usually emit once and complete. Orders may update live, so getOrders() is likely a stream emitting multiple times.

2. Step 2: Choose appropriate combinators

   Use forkJoin for getUser() to wait for the single response. Use combineLatest for getOrders() to get live updates. Then combine these appropriately (e.g., nest or switchMap) to show user info immediately and update orders live.

3. Final Answer:

   Use forkJoin for getUser() and combineLatest for getOrders() -> Option A

4. Quick Check:

   Single HTTP = forkJoin, live stream = combineLatest [OK]

Hint: Use forkJoin for single HTTP, combineLatest for live streams [OK]

Common Mistakes:

• Using combineLatest for single HTTP call causing unnecessary updates
• Using forkJoin for live streams causing no updates after first emit
• Mixing combinators incorrectly causing delayed or missing data