Lesson 21 / 30

RxJS Observables

Streams of values over time, and how to work with them.

What's an Observable?

An Observable represents a stream of values delivered over time — an HTTP response, a click stream, or route changes are all Observables in Angular.

subscribe()

Nothing runs until you subscribe. The callback receives each emitted value.

this.productService.getProducts().subscribe(products => {
  this.products = products;
});

Operators: map & filter

pipe() chains operators to transform the stream — map reshapes values, filter drops ones you don't want.

this.productService.getProducts().pipe(
  map(products => products.filter(p => p.inStock)),
).subscribe(inStockProducts => {
  this.products = inStockProducts;
});

The async pipe

In the template, | async subscribes for you and unsubscribes automatically — no manual cleanup needed for that binding.