Common RxJS operators in Angular

RxJS Operators in Angular

RxJS operators transform, filter, and combine Observable streams. Knowing the key operators is essential for Angular development.

Transformation Operators

map — Transform each value

typescript

this.http.get<ApiResponse>('/api/users').pipe(
  map(response => response.data) // Extract data from response
);

switchMap — Map to new Observable (cancels previous)

typescript

// Search with auto-cancel of previous request
this.searchControl.valueChanges.pipe(
  debounceTime(300),
  switchMap(query => this.http.get(\`/api/search?q=\${query}\`))
);

mergeMap — Map to new Observable (parallel)

typescript

// Process items in parallel
from(userIds).pipe(
  mergeMap(id => this.userService.getUser(id))
);

concatMap — Map to new Observable (sequential)

typescript

// Process one at a time, in order
from(items).pipe(
  concatMap(item => this.apiService.save(item))
);

Filtering Operators

filter

typescript

this.route.paramMap.pipe(
  map(params => params.get('id')),
  filter((id): id is string => id !== null)
);

debounceTime — Wait for pause

typescript

this.searchInput.valueChanges.pipe(
  debounceTime(300), // Wait 300ms after last keystroke
  distinctUntilChanged(), // Only emit if value changed
  switchMap(query => this.search(query))
);

distinctUntilChanged

typescript

this.store.select('count').pipe(
  distinctUntilChanged() // Only emit when value actually changes
);

take / takeUntil

typescript

// Take first N values
this.http.get('/api/config').pipe(take(1));

// Unsubscribe pattern
private destroy$ = new Subject<void>();

ngOnInit() {
  this.someObservable$.pipe(
    takeUntil(this.destroy$)
  ).subscribe(/* ... */);
}

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

Combination Operators

combineLatest

typescript

// Combine multiple streams — emits when ANY source emits
combineLatest([
  this.userService.getUser(id),
  this.orderService.getOrders(id),
  this.settingsService.getSettings()
]).pipe(
  map(([user, orders, settings]) => ({ user, orders, settings }))
);

forkJoin

typescript

// Wait for ALL to complete — like Promise.all
forkJoin({
  users: this.http.get<User[]>('/api/users'),
  products: this.http.get<Product[]>('/api/products'),
  config: this.http.get<Config>('/api/config'),
}).subscribe(({ users, products, config }) => {
  // All three completed
});

Error Handling Operators

catchError / retry

typescript

this.http.get('/api/data').pipe(
  retry(3), // Retry up to 3 times
  catchError(error => {
    this.errorService.handle(error);
    return of([]); // Return fallback value
  })
);

Operator	Purpose	When to Use
`map`	Transform values	Always
`switchMap`	Map + cancel previous	Search, route changes
`mergeMap`	Map + run parallel	Parallel API calls
`concatMap`	Map + run sequential	Ordered saves
`filter`	Skip unwanted values	Conditional processing
`debounceTime`	Wait for pause	Search input
`distinctUntilChanged`	Skip duplicates	Form changes
`takeUntil`	Auto-unsubscribe	Component cleanup
`combineLatest`	Combine latest values	Multiple data sources
`forkJoin`	Wait for all to complete	Parallel requests
`catchError`	Handle errors	Error recovery

Master switchMap (cancels previous — perfect for search), takeUntil (clean unsubscribe pattern), and combineLatest/forkJoin (parallel data loading). Use debounceTime + distinctUntilChanged + switchMap for type-ahead search. Always handle errors with catchError.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems