🌊 RxJS & Observables

About This Feature

RxJS is Angular's reactive programming library. It lets you treat events and async data as streams you can compose with operators.

• Observable — lazy stream of values over time
• Subject — multicast observable + observer; manually push values
• BehaviorSubject — Subject with an initial value; replays last value to new subscribers
• debounceTime — wait for a pause before emitting (e.g., search)
• distinctUntilChanged — skip duplicate consecutive values
• scan — accumulate values over time (like Array.reduce)
• takeUntil — complete when another observable emits (memory-safe unsubscribe)

Code Example

// Subject — multicast observable, no initial value
private search$ = new Subject<string>();

// BehaviorSubject — has initial value, emits to late subscribers
private events$ = new BehaviorSubject<string[]>([]);

// Operators pipeline
this.search$.pipe(
  debounceTime(400),           // wait 400ms after last emission
  distinctUntilChanged(),      // ignore duplicate values
  map(term => term.toLowerCase()),
  filter(term => term.length > 0),
  takeUntil(this.destroy$)     // auto-unsubscribe on destroy
).subscribe(term => { /* handle */ });

// interval + takeUntil
private stop$ = new Subject<void>();
interval(1000)
  .pipe(takeUntil(this.stop$))
  .subscribe(n => this.tick = n);

// scan() — accumulates values like Array.reduce
clicks$ = clickSubject$.pipe(
  scan((total) => total + 1, 0),
  startWith(0)
);

// Cleanup in ngOnDestroy
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Live Demo