Agent skill · software engineering · aiskillstore
rxjs-patterns-for-angular
Implement RxJS patterns for reactive programming in Angular. Use this skill when working with Observables, operators, subscriptions, async data flows, and error handling. Covers common patterns like combineLatest, switchMap, debounceTime, catchError, retry logic, and integration with Angular Signals using toSignal() and toObservable(). Ensures proper subscription cleanup with takeUntilDestroyed().
Why this skill is useful
Provides specific RxJS patterns and Angular integration techniques that enhance reactive programming capabilities not commonly known to the AI.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
RxJS Patterns for Angular Skill This skill helps implement reactive patterns using RxJS in Angular applications. Core Principles Modern Angular + RxJS Signals First: Use Signals for state, RxJS for async operations Auto Cleanup: Use takeUntilDestroyed() for subscription management Interop: Use toSignal() and toObservable() for Signal/Observable conversion AsyncPipe: Prefer AsyncPipe in templates when not using Signals Key Concepts Observables for async data streams Operators for data transformation Subscription management and cleanup Error handling and retry logic Signal + RxJS Integration toSignal() - Observable to Signal toObservable() - Signal to Observable Subscription Management takeUntilDestroyed() - Auto Cleanup Manual Cleanup (Legacy Pattern - Avoid) Common Operators switchMap - Switch to New Observable mergeMap - Merge Multiple Observables concatMap - Process Sequentially debounceTime - Debounce Input distinctUntilChanged - Skip Duplicates filter - Filter Values map - Transform Values tap - Side Effects Combining Observables combineLatest - Wait for All forkJoin - Wait for All to Complete merge - Merge Multiple Streams zip - Pair Up Values Error Handling catchError - Handle Errors retry - Retry on Failure retryWhen - Conditional Retry with Backoff Real-Time Data interval - Periodic Updates WebSocket Pattern Loading States Share Loading State Loading Indicator Pattern Advanced Patterns Throttle vs Debounce Scan - Accumulate Values startWith - Initial Value pairwise - Previous + Current Best Practices ✅ DO ❌ DON'T Checklist When using RxJS: [ ] Use toSignal() to convert Observables to Signals [ ] Use takeUntilDestroyed() for subscription cleanup [ ] Handle errors with catchError() [ ] Debounce user input (300ms) [ ] Use switchMap for cancellable requests [ ] Share expensive Observables with shareReplay() [ ] Provide initial values with startWith() [ ] Filter out empty/null values [ ] Test async operations [ ] Document complex operator chains References RxJS D …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/rxjs-patterns-for-angular