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.