Observable vs Promise mental model in Angular - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Observable vs Promise: Emission Behavior

Which statement best describes the difference in how Observables and Promises emit values over time?

A Observables emit multiple values over time, while Promises emit only one value once.

B Promises emit multiple values over time, while Observables emit only one value once.

C Both Observables and Promises emit multiple values over time.

D Both Observables and Promises emit only one value once.

💡 Hint

Think about how many times you can get data from each after subscribing or calling.

Promises deliver a single value once and then complete. Observables can emit many values over time, allowing multiple data events.

❓ component_behavior

intermediate

Angular Component: Observable Subscription Behavior

In an Angular component, if you subscribe to an Observable that emits values every second, what happens if you subscribe twice without unsubscribing?

Angular

this.myObservable.subscribe(val => console.log('First:', val));
this.myObservable.subscribe(val => console.log('Second:', val));

A Subscribing twice causes a runtime error.

B Only the first subscription receives values; the second does not receive any.

C The Observable emits values only once, so only one log appears every second.

D Both subscriptions receive the same values independently, so logs show 'First:' and 'Second:' every second.

💡 Hint

Think about how Observables handle multiple subscribers.

Each subscription to an Observable is independent. Both subscribers receive all emitted values separately.

❓ lifecycle

advanced

Promise vs Observable: Cancellation and Cleanup

Which statement correctly describes how cancellation or cleanup works for Promises and Observables in Angular?

A Observables can be cancelled by unsubscribing, but Promises cannot be cancelled once started.

B Neither Promises nor Observables support cancellation.

C Both Promises and Observables can be cancelled by calling unsubscribe().

D Promises can be cancelled by calling unsubscribe(), but Observables cannot be cancelled.

💡 Hint

Consider how you stop receiving data from each after starting.

Observables support cancellation by unsubscribing, which stops emissions and allows cleanup. Promises run to completion and cannot be cancelled.

📝 Syntax

advanced

Correct Syntax for Creating an Observable

Which code snippet correctly creates an Observable that emits the values 1, 2, and 3, then completes?

A const obs = Observable.of(1, 2, 3);

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

C const obs = new Promise(resolve => { resolve([1, 2, 3]); });

D const obs = Observable.create(observer => { observer.emit(1); observer.emit(2); observer.emit(3); observer.done(); });

💡 Hint

Check the method names and syntax for Observables.

Option B uses the correct Observable constructor and methods: next() to emit values and complete() to finish. Option B is deprecated syntax. Option B creates a Promise, not an Observable. Option B uses invalid method names.

🔧 Debug

expert

Debugging Observable Subscription Memory Leak

An Angular component subscribes to an Observable in ngOnInit but does not unsubscribe in ngOnDestroy. What is the most likely consequence?

A The Observable throws an error when the component is destroyed.

B No issue occurs; Angular automatically unsubscribes Observables on component destroy.

C The subscription continues after component destruction, causing a memory leak and unexpected behavior.

D The subscription is paused automatically and resumes if the component is recreated.

💡 Hint

Think about what happens if you keep listening to data after leaving a page.

Without unsubscribing, the Observable keeps running and holding resources even after the component is gone, causing memory leaks and possible bugs.