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.

Practice

1. Which statement best describes the difference between an Observable and a Promise in Angular?

easy

A. Observable is synchronous; Promise is asynchronous.

B. Promise handles a single future value; Observable can handle multiple values over time.

C. Promise can be cancelled; Observable cannot be cancelled.

D. Observable handles a single future value; Promise can handle multiple values over time.

Solution

1. Step 1: Understand the nature of Promise

   A Promise represents a single future value or error that will be resolved once.

2. Step 2: Understand the nature of Observable

   An Observable can emit multiple values over time and can be stopped or cancelled.

3. Final Answer:

   Promise handles a single future value; Observable can handle multiple values over time. -> Option B

4. Quick Check:

   Promise = single value, Observable = multiple values [OK]

Hint: Promise = one value, Observable = many values over time [OK]

Common Mistakes:

• Thinking Promise can emit multiple values
• Believing Observable cannot be cancelled
• Confusing synchronous and asynchronous behavior

2. Which of the following is the correct way to create a Promise that resolves with the value 42 in Angular?

easy

A. const p = new Promise((resolve, reject) => reject(42));

B. const p = new Promise(resolve => reject(42));

C. const p = new Promise((resolve, reject) => resolve(42));

D. const p = new Promise(() => 42);

Solution

1. Step 1: Check Promise constructor syntax

   The Promise constructor takes a function with two parameters: resolve and reject.

2. Step 2: Verify correct usage to resolve with 42

   Calling resolve(42) inside the function correctly resolves the Promise with 42.

3. Final Answer:

   const p = new Promise((resolve, reject) => resolve(42)); -> Option C

4. Quick Check:

   Promise constructor needs resolve and reject parameters [OK]

Hint: Promise constructor needs (resolve, reject) parameters [OK]

Common Mistakes:

• Omitting reject parameter in Promise constructor
• Calling reject instead of resolve to return value
• Returning value directly without resolve

3. Consider this Angular code snippet:

const obs = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.complete();
});

obs.subscribe(value => console.log(value));

What will be printed to the console?

medium

A. 1 2

B. 1

C. 2

D. No output

Solution

1. Step 1: Analyze Observable emissions

   The Observable emits two values: 1 and 2, then completes.

2. Step 2: Understand subscription behavior

   The subscriber logs each emitted value, so both 1 and 2 are printed.

3. Final Answer:

   1 2 -> Option A

4. Quick Check:

   Observable emits multiple values, all logged [OK]

Hint: Observable emits all next() values until complete [OK]

Common Mistakes:

• Assuming only first value is logged
• Thinking complete() emits a value
• Confusing Observable with Promise single value

4. What is wrong with this Promise usage in Angular?

const p = new Promise((resolve, reject) => {
  setTimeout(() => resolve('done'), 1000);
});
p.then(result => console.log(result));
p.catch(error => console.error(error));
p.cancel();

medium

A. Promises do not have a cancel() method, so calling it causes an error.

B. The Promise should use reject() instead of resolve() inside setTimeout.

C. The then() method should come after catch(), not before.

D. The Promise constructor is missing the reject parameter.

Solution

1. Step 1: Check Promise API for cancellation

   Promises do not support cancellation; there is no cancel() method.

2. Step 2: Identify error cause

   Calling p.cancel() will cause a runtime error because cancel() is undefined.

3. Final Answer:

   Promises do not have a cancel() method, so calling it causes an error. -> Option A

4. Quick Check:

   Promise cancellation is not supported [OK]

Hint: Promises cannot be cancelled; no cancel() method exists [OK]

Common Mistakes:

• Thinking Promise supports cancel() like Observable
• Confusing resolve and reject usage
• Believing then() must come after catch()

5. You want to fetch user data that updates every 5 seconds and be able to stop the updates when the user navigates away. Which approach fits best in Angular?

hard

A. Use an Observable but do not unsubscribe; it stops automatically.

B. Use a Promise that resolves with user data every 5 seconds.

C. Use a Promise and call cancel() to stop fetching data.

D. Use an Observable that emits new user data every 5 seconds and unsubscribe on navigation.

Solution

1. Step 1: Identify need for multiple values over time

   Fetching user data every 5 seconds means multiple values over time, which suits an Observable.

2. Step 2: Understand cancellation requirement

   Observables can be unsubscribed to stop receiving updates, fitting the need to stop on navigation.

3. Final Answer:

   Use an Observable that emits new user data every 5 seconds and unsubscribe on navigation. -> Option D

4. Quick Check:

   Multiple updates + cancel = Observable with unsubscribe [OK]

Hint: Multiple updates + cancel = Observable with unsubscribe [OK]

Common Mistakes:

• Using Promise for multiple repeated values
• Assuming Promise supports cancel()
• Not unsubscribing Observable causing memory leaks