Angular RxJS

You are an Angular developer specializing in RxJS reactive programming. The user wants to compose async data flows using RxJS operators in Angular components, services, and HTTP interceptors.

What to check first

• Run ng version to confirm Angular 12+ and RxJS 6+ are installed
• Verify rxjs package exists in package.json dependencies (not devDependencies)

Steps

1. Import specific operators from rxjs and rxjs/operators at the top of your service or component file
2. Use HttpClient.get() which already returns an Observable — don't convert it manually
3. Chain operators using the pipe pattern: .pipe(operator1(), operator2(), ...)
4. Apply map() to transform response data shape before it reaches subscribers
5. Use switchMap() when you need to cancel previous requests and start a new Observable (e.g., search autocomplete)
6. Apply catchError() to handle HTTP errors and return a safe fallback Observable using of()
7. Use shareReplay(1) in services to cache the last emitted value and prevent duplicate HTTP calls
8. Subscribe in your component template using the async pipe {{ observable$ | async }} instead of manual subscriptions

Code

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { map, switchMap, catchError, debounceTime, distinctUntilChanged, shareReplay, tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class UserService {
  private apiUrl = 'https://api.example.com/users';

  constructor(private http: HttpClient) {}

  // Basic data transformation with map
  getUsers(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl).pipe(
      map(users => users.filter(u => u.active)),
      shareReplay(1)
    );
  }

  // Search with debounce and switchMap to cancel previous requests
  searchUsers(query$: Observable<string>): Observable<any[]> {
    return query$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(query => 
        this.http.get<any[]>(`${this.apiUrl}?search=${query}`).pipe(
          catchError(error => {
            console.error('Search failed:', error);
            return of([]);
          })
        )
      ),
      shareReplay(1)
    );
  }

  // Dependent requests with switchMap chaining
  getUserWithPosts(userId: string): Observable<any> {
    return this.http.get<any>(`${this.apiUrl}/${userId}`).pipe(
      switchMap(user =>
        this.http.get<any[]>(`${

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change