Angular RxJS Observables

What is RxJS Observables in Angular?

An Observable is a stream of values over time. Angular uses them everywhere — HTTP responses, route parameters, form value changes, event streams — so RxJS is effectively part of learning Angular.

Why RxJS Observables matters

A Promise resolves once with one value. An Observable can emit many values, be cancelled, and be transformed with operators before anything subscribes — which is what makes search-as-you-type, polling and cancellation straightforward.

RxJS Observables example

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

const nums$ = of(1, 2, 3);                 // emits 1,2,3 then completes
const arr$  = from([10, 20, 30]);          // from an array or promise
const tick$ = interval(1000);              // 0,1,2,… every second

const sub = tick$.subscribe({
  next:  value => console.log(value),
  error: err   => console.error(err),
  complete: ()  => console.log('done'),
});

sub.unsubscribe();   // stop receiving values

Key points to remember

• Cold Observables do nothing until subscribed — HttpClient calls are cold.
• The $ suffix on a variable name conventionally marks an Observable.
• Every manual subscription must be unsubscribed, or it leaks.

Observable vs Promise

Common mistakes with RxJS Observables

• Calling an HTTP service method and never subscribing, so no request is made.
• Subscribing inside another subscribe instead of using switchMap.