Why should you care?

HTTP, WebSockets, and user input are events over time; Observables compose them with map, filter, switchMap.

See it live — copy this example

Paste into your MeanVerse project (Angular + Express + MongoDB), then run with ng serve / node / mongosh as noted.

@Component({ standalone: true, template: `
  @for (a of accounts$ | async; track a.id) {
    <li>{{ a.name }}</li>
  }` })
export class AccountListComponent {
  accounts$ = this.api.list().pipe(
    map(list => list.filter(a => a.active)),
    catchError(() => of([]))
  );
  constructor(private api: AccountService) {}
}

What happened?

• list() returns cold Observable — HTTP fires when subscribed.
• async pipe subscribes and unsubscribes automatically.
• catchError replaces failed stream with empty array.

Practice next

1. Return Observable from service, not Promise.
2. Use async pipe in template — avoid manual subscribe when possible.
3. Pipe map/filter before template.
4. Add debounceTime on search input Observable.
5. Compare Observable vs Promise for one GET request.

Remember

Observables = push streams over time. HttpClient is Observable-based. async pipe handles subscribe lifecycle.

Live account search

MeanVerse typeahead hits API on each keystroke with debounce.

Outcome: Observable pipeline cancels stale requests via switchMap.