majiayu000 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