Observable vs Promise mental model in Angular - When to Use Which

The Big Idea

Discover why waiting once is old news and listening continuously is the future!

The Scenario

Imagine you want to get data from a server and update your app whenever new data arrives, like watching a live sports score.

The Problem

Using simple callbacks or promises means you only get one update and then you have to set everything up again manually for new data. This is tiring and easy to mess up.

The Solution

Observables let you listen to a stream of data over time, so your app updates automatically whenever new data comes in, without extra setup.

Before vs After

✗ Before

fetch(url).then(response => response.json()).then(data => console.log(data)); // one-time fetch

✓ After

observable$.subscribe(data => console.log(data)); // continuous updates

What It Enables

You can handle multiple data events smoothly, like live chats, real-time notifications, or streaming data.

Real Life Example

Think of a news app that shows breaking news instantly as reporters send updates, without you refreshing the page.

Key Takeaways

Promises handle one-time async results; Observables handle streams of data.

Observables make real-time updates easy and clean.

Using Observables fits well with Angular's reactive style.