Chapter 9.1☕ 15 min read

Observable vs Promise

Observables are the backbone of Angular async operations. Understanding the difference between Observables and Promises is critical for Angular development.

01What is an Observable

An Observable is a stream of values over time. It can emit 0, 1, or many values — and it's lazy: it doesn't do anything until you subscribe.

"Observable = paani ka pipe — jab tak chal raha hai, paani aata rahega."

import { Observable } from 'rxjs';

// Define an observable — nothing happens yet (it's lazy)
const myObservable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.next('World');
  subscriber.complete();
});

// Subscribe — NOW it executes
myObservable.subscribe(val => console.log(val));
// Output: Hello, World

Key characteristics of Observables:

Can emit multiple values over time
Lazy — doesn't execute until subscribed
Cancellable — unsubscribe to stop
Operators — transform, filter, combine with .pipe()
Angular's HttpClient returns Observables — not Promises

02Observable vs Promise — Key Differences

Here's the head-to-head comparison:

┌──────────────────┬──────────────────┬──────────────────┐
│   Feature        │   Observable     │    Promise       │
├──────────────────┼──────────────────┼──────────────────┤
│ Values           │ 0, 1, or many    │ Exactly 1        │
│ Lazy/Eager       │ Lazy (subscribe) │ Eager (immediate)│
│ Cancellable      │ Yes (unsubscribe)│ No               │
│ Operators        │ Yes (pipe)       │ No (.then chain) │
│ Retry            │ Yes (retry(n))   │ No (rewrite)     │
│ Angular uses     │ HttpClient, etc. │ fetch()          │
└──────────────────┴──────────────────┴──────────────────┘

"Observable = Netflix series (multiple episodes), Promise = movie (one-time)."

"Observable = Swiggy order tracking (live updates), Promise = Flipkart delivery (one status)."

Promise example:

const promise = fetch('/api/biryani')
  .then(res => res.json())
  .then(data => console.log(data));
// Starts IMMEDIATELY — can't cancel, can't retry

Observable example:

const obs = this.http.get('/api/biryani')
  .pipe(retry(3)); // Can retry!
// Does NOTHING until subscribe:
obs.subscribe(data => console.log(data));

03Creating Observables

RxJS provides several functions to create Observables:

import { of, from, interval, throwError } from 'rxjs';

// of — emit specific values
of('Hyderabad', 'Biryani').subscribe(v => console.log(v));

// from — convert array/Promise/iterable to Observable
from([10, 20, 30]).subscribe(v => console.log(v));
from(fetch('/api/data')).subscribe(v => console.log(v));

// interval — emit 0, 1, 2... every N ms
interval(1000).subscribe(v => console.log(v)); // Every second

// throwError — emit error
throwError(() => new Error('Bhai nahi hua'))
  .subscribe({ error: e => console.error(e) });

"of = manual counting, from = array ko stream mein badlo."

of vs from:

of(1, 2, 3) — takes individual arguments, emits each separately
from([1, 2, 3]) — takes an array, iterates over it
Both produce same output: 1, 2, 3

04Subscribing to Observables

Subscribing is when the Observable actually executes.

// Full subscriber object
observable.subscribe({
  next: (value) => console.log('Value:', value),
  error: (error) => console.error('Error:', error),
  complete: () => console.log('Stream complete')
});

// Shorthand — just next handler
observable.subscribe(value => console.log('Value:', value));

// Subscribing returns a Subscription object
const subscription = observable.subscribe(value => console.log(value));
subscription.unsubscribe(); // Cancel the subscription

"Subscribe = TV on karna — bina subscribe ke kuch nahi dikhega."

CRITICAL: Always unsubscribe from Observables that don't complete (like interval, user events) to prevent memory leaks. HTTP Observables auto-complete after one response, so they usually don't leak — but it's still good practice.

05When to Use What

Choosing between Observable and Promise depends on the use case.

Use Observable when:

Multiple values over time (streams, WebSockets, user events)
HTTP calls (Angular's HttpClient returns Observables)
Form value changes (valueChanges is an Observable)
Router events, queryParams, route params
Need operators like retry, debounceTime, map, filter

Use Promise when:

One-time async operation
Using fetch() API directly
async/await syntax preferred
Interacting with non-Angular libraries that use Promises

"Angular mein 90% Observable hai — Promise sirf jab ek value chahiye."

In Angular, you'll work with Observables 90% of the time. HttpClient, reactive forms, router — all use Observables natively.

Key Takeaways

✅ Observable = stream of values over time — lazy, cancellable, multiple values
✅ Observable vs Promise: lazy vs eager, cancellable vs not, many vs one value, pipe vs then
✅ Creation: of(values), from(array), interval(ms), throwError(error)
✅ Subscribe triggers execution: .subscribe({ next, error, complete }) — must unsubscribe to prevent leaks
✅ Angular uses Observables for HTTP, forms, router — Promises for one-off async

Previous8.7 — Dynamic Forms 📋 All Chapters Next Chapter9.2 — Creating Observables →