Observable vs Promise mental model in Angular

Introduction

Observables and Promises help us handle data that comes later, like waiting for a message or a file. They let us work with things that take time without stopping everything.

When you want to get one value once, like loading user info from a server.

When you want to get many values over time, like live chat messages or sensor data.

When you want to cancel waiting for data if you don't need it anymore.

When you want to handle data streams that can start and stop anytime.

When you want to combine or transform multiple data sources easily.

Syntax

Angular

Promise example:
const promise = new Promise((resolve, reject) => {
  // do something async
  resolve('done');
});
promise.then(value => console.log(value));

Observable example:
import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
  subscriber.next('first');
  subscriber.next('second');
  subscriber.complete();
});
observable.subscribe(value => console.log(value));

Promises handle one value or error and then finish.

Observables can send many values over time and can be stopped.

Examples

This Promise waits 1 second then sends one message.

Angular

const promise = new Promise(resolve => {
  setTimeout(() => resolve('Hello from Promise!'), 1000);
});
promise.then(msg => console.log(msg));

This Observable sends two messages over time and then finishes.

Angular

import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
  subscriber.next('First message');
  setTimeout(() => subscriber.next('Second message'), 1000);
  setTimeout(() => subscriber.complete(), 1500);
});
observable.subscribe({
  next: msg => console.log(msg),
  complete: () => console.log('Done')
});

Promise example fetching data once from a server.

Angular

const promise = fetch('https://api.example.com/data').then(res => res.json());
promise.then(data => console.log(data));

Observable example emitting numbers every second, stopped after 3.5 seconds.

Angular

import { interval } from 'rxjs';
const observable = interval(1000); // emits numbers every second
const subscription = observable.subscribe(num => console.log(num));
setTimeout(() => subscription.unsubscribe(), 3500);

Sample Program

This Angular component shows how a Promise gives one message after 2 seconds, while an Observable sends multiple messages over time and then finishes.

Angular

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <h1>Observable vs Promise Demo</h1>
    <button (click)="startPromise()">Start Promise</button>
    <button (click)="startObservable()">Start Observable</button>
    <div>
      <h2>Promise Result:</h2>
      <p>{{ promiseResult }}</p>
    </div>
    <div>
      <h2>Observable Results:</h2>
      <ul>
        <li *ngFor="let msg of observableResults">{{ msg }}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  promiseResult = '';
  observableResults: string[] = [];
  private observableSubscription: any;

  startPromise() {
    this.promiseResult = 'Waiting...';
    const promise = new Promise<string>(resolve => {
      setTimeout(() => resolve('Promise says hello!'), 2000);
    });
    promise.then(msg => this.promiseResult = msg);
  }

  startObservable() {
    this.observableResults = [];
    const observable = new Observable<string>(subscriber => {
      subscriber.next('Observable message 1');
      setTimeout(() => subscriber.next('Observable message 2'), 1000);
      setTimeout(() => subscriber.next('Observable message 3'), 2000);
      setTimeout(() => subscriber.complete(), 2500);
    });

    this.observableSubscription = observable.subscribe({
      next: msg => this.observableResults.push(msg),
      complete: () => this.observableResults.push('Observable complete')
    });
  }
}

Important Notes

Promises start immediately when created; Observables start when you subscribe.

Observables can be cancelled by unsubscribing; Promises cannot be cancelled once started.

Use Observables for streams of data, Promises for single async results.

Summary

Promises handle one future value or error.

Observables handle many values over time and can be stopped.

Choose based on whether you expect one or many results and if you need to cancel.