OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add oguzhan18/angular-ecosystem-skills --skill rxjs
ALWAYS use when working with RxJS Observables, operators, and reactive patterns in Angular applications.
npx skills add oguzhan18/angular-ecosystem-skills --skill rxjs
Version: 8.x (2025) Tags: Reactive Programming, Observables, Async
References: Docs — operators, API • Angular RxJS • GitHub
This section documents recent version-specific API changes.
NEW: RxJS 8 — Modern TypeScript types, smaller bundles, better tree-shaking source
NEW: Improved interop helpers — Simpler conversion to/from Signals with toSignal and toObservable
NEW: RxJS 8 ergonomics — Compact operator signatures and safer defaults
DEPRECATED: Legacy import style — Use RxJS 7+ pipeable operators instead of patch imports
catchError for error handlingshareReplay(1) for caching shared observablesName observables with $ suffix — Improves readability
Use Signals for UI state, RxJS for events — Modern Angular pattern
// switchMap - cancel previous, keep latest (search)
search(term: string): Observable<SearchResult[]> {
return this.searchService.search(term).pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(term => term ? this.http.get(...) : of([]))
);
}
// mergeMap - run concurrently (multiple API calls)
this.items$.pipe(
mergeMap(item => this.save(item))
);
// concatMap - run sequentially (order matters)
this.orders$.pipe(
concatMap(order => this.processOrder(order))
);
// exhaustMap - ignore while running (form submit)
this.submit$.pipe(
exhaustMap(() => this.submitForm())
);// Use takeUntil pattern
private destroy$ = new Subject<void>();
ngOnInit() {
this.data$.pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
// Or use takeUntilDestroyed (Angular 16+)
private destroy$ = takeUntilDestroyed();this.http.get('/api/data').pipe(
catchError(error => {
console.error(error);
return of([]); // Return fallback value
})
);this.data$ = this.http.get('/api/data').pipe(
shareReplay(1)
);// Convert Observable to Signal
users = toSignal(this.users$, { initialValue: [] });
// Convert Signal to Observable (if needed)
name$ = toObservable(this.name);