Observable vs Promise mental model in Angular - Visual Side-by-Side Comparison

Concept Flow - Observable vs Promise mental model

Start

↓

Create Promise

→Promise runs once

↓

Resolve or Reject

↓

Then or Catch

↓

Create Observable

→Observable waits

↓

Subscribe called

↓

Emit values multiple times

↓

Complete or Error

↓

End

This flow shows how a Promise runs once and resolves or rejects, while an Observable waits until subscribed and can emit multiple values over time.

Execution Sample

Angular

const promise = new Promise(res => res('Done'));
promise.then(val => console.log(val));

const observable = new Observable(sub => {
  sub.next('First');
  sub.next('Second');
  sub.complete();
});
observable.subscribe(val => console.log(val));

This code creates a Promise that resolves once and an Observable that emits two values before completing.

Execution Table

Step	Action	Promise State	Observable State	Output
1	Create Promise	Pending	Not created
2	Create Observable	Pending	Waiting for subscription
3	Promise executor runs	Pending	Waiting for subscription
4	Promise then() called	Resolved	Waiting for subscription
5	Promise then() callback runs	Resolved	Waiting for subscription	Console logs: Done
6	Observable subscribe() called	Resolved	Subscribed
7	Observable emits 'First'	Resolved	Emitting	Console logs: First
8	Observable emits 'Second'	Resolved	Emitting	Console logs: Second
9	Observable completes	Resolved	Completed
10	No more emissions	Resolved	Completed

💡 Promise resolves once and Observable completes after emitting multiple values.

Variable Tracker

Variable	Start	After Step 3	After Step 6	After Step 9
promiseState	Pending	Pending	Resolved	Resolved
observableState	Not created	Waiting for subscription	Subscribed	Completed
output			Done	Done, First, Second

Key Moments - 3 Insights

Why does the Promise output only once while the Observable outputs multiple times?

Because the Promise executor runs immediately and resolves once (see execution_table step 4 and 5), while the Observable waits for subscription and can emit many values over time (see steps 6 to 8).

When does the Observable start emitting values?

Only after subscribe() is called (execution_table step 6), unlike the Promise which runs immediately upon creation.

Can a Promise emit multiple values like an Observable?

No, a Promise resolves or rejects once and cannot emit multiple values, as shown by the single output at step 5 in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the Promise resolve?

A Step 3

B Step 6

C Step 8

D Step 9

💡 Hint

Check the Promise State column in execution_table at step 3.

At which step does the Observable start emitting values?

A Step 4

B Step 7

C Step 6

D Step 10

💡 Hint

Look at the Observable State and Output columns in execution_table.

If the Observable did not call complete(), what would happen?

A It would emit values forever

B It would never emit any values

C It would emit values but never signal completion

D It would behave like a Promise

💡 Hint

Refer to the Observable State column and the meaning of complete() in execution_table steps 8 and 9.

Concept Snapshot

Promise:
- Runs immediately
- Resolves or rejects once
- Emits single value

Observable:
- Waits for subscription
- Can emit multiple values over time
- Can complete or error

Use Observable for streams, Promise for single async result.

Full Transcript

This visual execution compares Promise and Observable in Angular. A Promise starts running immediately when created, resolving or rejecting once. The Observable waits until you subscribe, then can emit many values over time before completing. The execution table shows Promise resolving at step 4 and emitting one output at step 5. The Observable starts emitting after subscription at step 6, outputs multiple values at steps 7 and 8, and completes at step 9. Variables track promiseState and observableState changes. Key moments clarify why Promise emits once and Observable can emit many times. The quiz tests understanding of when each runs and emits. This helps beginners see the difference in timing and behavior between Promise and Observable.

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