Observable vs Promise mental model in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Promise that resolves with 'Hello'.

Angular

const greeting = new Promise((resolve, reject) => { resolve([1]); });

Drag options to blanks, or click blank then click option'

A'Hello'

BHello

Cresolve

DPromise

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around string values.

Passing the function name instead of a value.

The Promise resolves with the string 'Hello', so it must be in quotes.

2fill in blank

medium

Complete the code to subscribe to an Observable and log its emitted value.

Angular

observable$.subscribe(value => { console.log([1]); });

Drag options to blanks, or click blank then click option'

Aobservable$

Bconsole

Csubscribe

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Logging the Observable itself instead of the emitted value.

Using subscribe instead of the parameter.

The callback receives the emitted value as 'value', which we want to log.

3fill in blank

hard

Fix the error in the Promise usage to handle the resolved value.

Angular

promise.then([1] => console.log('Done:', [1]));

Drag options to blanks, or click blank then click option'

Aresult

Bvalue =>

Cresult =>

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using just a variable name without arrow function.

Using a variable name that doesn't match the parameter.

The then method expects a function; use an arrow function with a parameter to receive the resolved value.

4fill in blank

hard

Fill both blanks to create an Observable that emits numbers 1 to 3 and completes.

Angular

const numbers$ = new Observable(observer => { observer.[1](1); observer.[1](2); observer.[1](3); observer.[2](); });

Drag options to blanks, or click blank then click option'

Anext

Bcomplete

Csubscribe

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using subscribe() instead of next().

Forgetting to call complete().

Use observer.next() to emit values and observer.complete() to signal completion.

5fill in blank

hard

Fill all three blanks to convert a Promise to an Observable and subscribe to it.

Angular

const promise = new Promise(resolve => resolve([3]));
const obs$ = from([1]);
obs$.[2](value => console.log(value));

Drag options to blanks, or click blank then click option'

Apromise

Bsubscribe

C'Hello Observable'

Dthen

Attempts:

3 left

💡 Hint

Common Mistakes

Using then instead of subscribe on Observable.

Passing wrong variable to from().

Use from(promise) to create an Observable from a Promise, then subscribe to it, and create a Promise resolving to a string.