RxJS Operators

import { map, filter, debounceTime, switchMap } from 'rxjs/operators';
import { fromEvent } from 'rxjs';

// map - transform each value
this.http.get<User[]>('/api/users').pipe(
  map(users => users.map(u => u.name))
).subscribe(names => console.log(names));

// filter - only emit values that pass condition
this.numbers$.pipe(
  filter(num => num % 2 === 0)  // only even numbers
).subscribe(even => console.log(even));

// debounceTime - wait before emitting (good for search)
const searchBox = document.getElementById('search');
fromEvent(searchBox, 'input').pipe(
  debounceTime(300),  // wait 300ms after typing stops
  map((event: any) => event.target.value)
).subscribe(searchTerm => this.search(searchTerm));

// switchMap - switch to new observable, cancel previous
this.searchControl.valueChanges.pipe(
  debounceTime(300),
  switchMap(term => this.searchService.search(term))
).subscribe(results => this.results = results);