RxJS Patterns in Angular
Master reactive programming in Angular with RxJS observables, operators, and best practices.
Core Patterns
Observable Creation
import { Observable, of, from, interval } from 'rxjs';
// From array const numbers$ = from([1, 2, 3, 4]);
// From promise const user$ = from(fetch('/api/user'));
// Interval const timer$ = interval(1000);
Operators
import { map, filter, switchMap, catchError } from 'rxjs/operators';
this.http.get<User[]>('/api/users').pipe( map(users => users.filter(u => u.active)), catchError(error => of([])) ).subscribe(users => console.log(users));
Service Pattern
@Injectable({ providedIn: 'root' }) export class UserService { private users$ = new BehaviorSubject<User[]>([]);
getUsers(): Observable<User[]> { return this.http.get<User[]>('/api/users').pipe( tap(users => this.users$.next(users)), catchError(this.handleError) ); }
private handleError(error: HttpErrorResponse): Observable<never> { console.error('Error:', error); return throwError(() => new Error('Something went wrong')); } }
Best Practices
-
Unsubscribe to prevent memory leaks
-
Use async pipe in templates
-
Handle errors with catchError
-
Use shareReplay for caching
-
Avoid nested subscriptions
-
Use switchMap for HTTP requests
Resources