What is the difference between an Observable and a Promise in Angular?
Understand Observable vs Promise in Angular: single vs multiple values, lazy vs eager, cancellation, operators, and when to convert between them.
Expected Interview Answer
A Promise handles a single async value that resolves once and cannot be cancelled, while an Observable is a lazy, cancellable stream that can emit many values over time and supports powerful operators.
Promises are eager — they start running the moment they are created — whereas Observables are lazy and execute only on subscription. A Promise emits exactly one value (or one rejection) and is not cancellable once started; an Observable can emit zero, one, or many values, can be unsubscribed to abort work, and can be transformed with RxJS operators like map, retry, and debounceTime. Angular's HttpClient returns Observables precisely to gain cancellation and composition.
- Observables emit multiple values; Promises emit one
- Observables are cancellable via unsubscribe; Promises are not
- Observables are lazy; Promises run eagerly on creation
- Observables support operators and retry logic natively
- Both interoperate — firstValueFrom converts an Observable to a Promise
AI Mentor Explanation
A Promise is like ordering a single delivery of the final match result: it arrives once and you cannot recall the courier. An Observable is like a ball-by-ball commentary subscription that keeps sending updates and which you can cancel any time. The result package is eager and one-shot, the commentary is lazy until you tune in and can be stopped mid-innings — that is the Promise versus Observable difference.
Step-by-Step Explanation
Step 1
Compare emission count
A Promise resolves one value; an Observable can emit zero, one, or many values over time.
Step 2
Compare eagerness
Promises run as soon as created; Observables are lazy and run only on subscribe.
Step 3
Compare cancellation
Promises cannot be cancelled; Observables abort work when you unsubscribe.
Step 4
Compare composition
Observables support RxJS operators like retry and debounceTime; Promises rely on then/catch chains.
Step 5
Interoperate when needed
Use firstValueFrom or lastValueFrom to convert an Observable to a Promise for async/await code.
What Interviewer Expects
- Single value versus multiple values distinction
- Eager (Promise) versus lazy (Observable) execution
- Cancellation via unsubscribe as an Observable strength
- Why HttpClient returns Observables in Angular
- Knowing how to convert between the two
Common Mistakes
- Claiming Observables can only emit one value
- Saying Promises are lazy like Observables
- Believing Promises can be cancelled
- Forgetting Observables need a subscription to run
- Not knowing firstValueFrom/lastValueFrom for conversion
Best Answer (HR Friendly)
“A Promise gives you one result and can't be stopped once it starts, while an Observable is a stream that can deliver many results over time and can be cancelled. Angular favours Observables because they are more flexible for things like HTTP requests and live data.”
Code Example
// Promise: eager, single value, not cancellable
const p = fetch('/api/user').then(r => r.json());
// Observable: lazy, cancellable, composable
const sub = this.http.get('/api/user').pipe(
retry(2)
).subscribe(user => console.log(user));
sub.unsubscribe(); // aborts the request
// Convert Observable -> Promise when needed
const user = await firstValueFrom(this.http.get('/api/user'));Follow-up Questions
- How do you convert an Observable to a Promise in Angular?
- Why does HttpClient return an Observable instead of a Promise?
- Can you retry a failed Promise the way you retry an Observable?
- What does it mean that Observables are lazy?
- When would you still prefer a Promise?
MCQ Practice
1. Which statement about Promises is true?
A Promise starts eagerly and resolves once; there is no built-in way to cancel it after it begins.
2. How do you convert an Observable to a Promise in modern Angular?
firstValueFrom (or lastValueFrom) is the current API; the older toPromise() is deprecated.
3. Why are Observables described as lazy?
An Observable does not execute until something subscribes to it, unlike an eager Promise.
Flash Cards
How many values does a Promise emit? — Exactly one — a single resolution or rejection.
Are Observables eager or lazy? — Lazy — they execute only when subscribed to.
Can you cancel a Promise? — No; once started it cannot be cancelled. Observables can via unsubscribe.
How to turn an Observable into a Promise? — Use firstValueFrom() or lastValueFrom().