Difference Between Observables and Promises in Angular

In Angular, both Observables and Promises are used to handle asynchronous operations like API calls, timers, user events, etc.
But they work differently and are used for different scenarios.

Quick Interview Definition

Promise

A Promise handles a single asynchronous value and returns either:

• success (resolve)

• failure (reject)

It executes immediately once created.

Observable

An Observable is a stream of asynchronous data that can emit:

• multiple values over time

• errors

• completion notification

It is lazy and starts only when subscribed.

Angular heavily uses Observables through RxJS and Angular HttpClient.

Core Differences

Feature	Promise	Observable
Values Returned	Single value	Multiple values
Execution	Eager (starts immediately)	Lazy (starts on subscribe)
Cancellation	Cannot cancel easily	Can unsubscribe
Operators	Limited (then, catch)	Powerful RxJS operators
Retry Support	Difficult	Easy with RxJS
Streams	No	Yes
Used In Angular	Less preferred	Preferred
Async Pipe Support	Limited	Excellent
Memory Management	Simple	Need unsubscribe

1. Promise Example

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data received");
  }, 2000);
});

promise.then(data => {
  console.log(data);
});

Output

Data received

Key Point

Promise returns only one value.

2. Observable Example

import { Observable } from 'rxjs';

const observable = new Observable(observer => {

  observer.next("First value");

  setTimeout(() => {
    observer.next("Second value");
  }, 2000);

  setTimeout(() => {
    observer.next("Third value");
  }, 4000);

  observer.complete();
});

observable.subscribe(data => {
  console.log(data);
});

Output

First value
Second value
Third value

Key Point

Observable can emit multiple values over time.

Important Interview Concept

Promise = Single Future Value

Example:

• Fetch user profile once

• Login response

• File upload completion

Observable = Data Stream

Example:

• API polling

• WebSocket messages

• Search box typing events

• Real-time notifications

• Form value changes

Angular Perspective

Angular prefers Observables because Angular applications deal with:

• event streams

• reactive programming

• async data flow

• live updates

Examples in Angular:

• HttpClient

• valueChanges

• Router events

HttpClient Example in Angular

constructor(private http: HttpClient) {}

getUsers() {
  return this.http.get('api/users');
}

HttpClient.get() returns an Observable.

Usage:

this.getUsers().subscribe(data => {
  console.log(data);
});

Why Angular Uses Observables Instead of Promises

1. Cancellation Support

const sub = observable.subscribe();

sub.unsubscribe();

Very useful when:

• component destroyed

• avoiding memory leaks

• cancelling API requests

Promises cannot be cancelled easily.

2. Multiple Values

Observables can continuously emit values.

Example:

interval(1000)

This emits every second.

Promise can only resolve once.

3. RxJS Operators

Observables support powerful operators like:

• map

• filter

• switchMap

• debounceTime

• retry

• catchError

Example:

this.http.get('/api/users')
  .pipe(
    retry(3),
    catchError(err => of([]))
  );

This is one of the biggest advantages.

Execution Difference

Promise Executes Immediately

const promise = fetch('/api/users');

API call starts instantly.

Observable Executes Only on Subscribe

const obs = this.http.get('/api/users');

Nothing happens yet.

Only after:

obs.subscribe();

does execution start.

This is called lazy execution.

Error Handling

Promise

promise
  .then(data => {})
  .catch(error => {});

Observable

observable.subscribe({
  next: data => {},
  error: err => {},
  complete: () => {}
});

Async Pipe Support

Observables work very well with Angular async pipe.

<div *ngIf="users$ | async as users">
  {{ users.length }}
</div>

Benefits:

• auto subscribe

• auto unsubscribe

• cleaner code

Memory Leak Interview Point

Observables may cause memory leaks if not unsubscribed.

Example:

ngOnDestroy() {
  this.subscription.unsubscribe();
}

But:

• HTTP observables auto complete

• async pipe handles unsubscribe automatically

When to Use Promise vs Observable

Use Promise When	Use Observable When
Single async operation	Multiple async values
Simple async task	Reactive programming
No cancellation needed	Need cancellation
Small JavaScript apps	Angular applications
One-time response	Continuous data stream

Common Interview Question

Q: Can we convert Observable to Promise?

Yes.

firstValueFrom(observable)

Example:

const data = await firstValueFrom(
  this.http.get('/api/users')
);

Another Common Interview Question

Q: Which is better in Angular?

Answer

Observables are preferred in Angular because:

• Angular framework is built around RxJS

• supports reactive programming

• supports streams

• supports operators

• cancellation support

• better for complex async workflows

Promises are useful for simpler one-time async tasks.

Best Interview Summary

Promise

• Single value

• Executes immediately

• Cannot cancel

• Simpler

Observable

• Multiple values

• Lazy execution

• Can unsubscribe

• RxJS operators

• Preferred in Angular

One-Line Interview Answer

A Promise handles a single asynchronous value, whereas an Observable handles a stream of asynchronous values and provides powerful features like lazy execution, cancellation, and RxJS operators, which is why Angular mainly uses Observables.