Angular Rxjs Patterns

Handles the RxJS patterns you actually use in Angular apps: observable creation with HttpClient, the operator chain you're always looking up (switchMap vs mergeMap vs concatMap), and subscription cleanup. The source covers practical stuff like debouncing search inputs, combining multiple streams with combineLatest, error handling with retry strategies, and the modern takeUntilDestroyed approach that beats the old ngOnDestroy pattern. Useful when you're wiring up API calls, managing form state, or dealing with any async data flow. The examples are copy-paste ready, which matters when you just need to remember whether to use forkJoin or zip.

skills.sh installs: 289
GitHub stars: 200
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add thebushidocollective/han --skill angular-rxjs-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

Angular RxJS Patterns

Master RxJS in Angular for handling async operations, data streams, and reactive programming patterns.

Observable Creation

Basic Observable Creation

import { Observable, of, from, interval, fromEvent } from 'rxjs';

// of - emit values in sequence
const numbers$ = of(1, 2, 3, 4, 5);

// from - convert array, promise, or iterable
const fromArray$ = from([1, 2, 3]);
const fromPromise$ = from(fetch('/api/data'));

// interval - emit numbers at intervals
const timer$ = interval(1000); // Every second

// fromEvent - DOM events
const clicks$ = fromEvent(document, 'click');

// Custom observable
const custom$ = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.complete();
});

HttpClient Observables

import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private readonly http = inject(HttpClient);

  getData(): Observable<Data[]> {
    return this.http.get<Data[]>('/api/data');
  }

SKILL.md on GitHub