mcpField
A
angular-reactive

angular-reactive

github.com/oguzhan18Development7177 installsUpdated 31w ago
Repository

About angular-reactive

A reference skill for Angular developers working with reactive programming and RxJS. It presents patterns for state services, Observable-based data access, template subscriptions, caching, and cleanup.

Key features

  1. 01BehaviorSubject state patterns
  2. 02Observable-based services
  3. 03Async pipe usage
  4. 04shareReplay caching
  5. 05takeUntil cleanup

Use cases

  1. 01Sharing state through a service
  2. 02Displaying Observable data in templates
  3. 03Caching HTTP results
  4. 04Cleaning up subscriptions

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-reactive

After installing, type/angular-reactivein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

Details

From the project README

Angular Reactive Programming

Version: Angular 21 (2025) Tags: Reactive, Observables, RxJS, BehaviorSubject

References: Reactive Guide • RxJS

Best Practices

  • Use BehaviorSubject for state
@Injectable({ providedIn: 'root' })
export class StateService {
  private state = new BehaviorSubject<State>(initialState);
  state$ = this.state.asObservable();
  
  updateState(newState: Partial<State>) {
    this.state.next({ ...this.state.value, ...newState });
  }
}
  • Use Observable in services
@Injectable({ providedIn: 'root' })
export class DataService {
  private http = inject(HttpClient);
  
  getData(): Observable<Data[]> {
    return this.http.get<Data[]>('/api/data');
  }
}
  • Use async pipe
@Component({
  template: `
    @if (data$ | async; as data) {
      {{ data.name }}
    }
  `
})
export class MyComponent {
  data$ = this.service.getData();
}
  • Use shareReplay for caching
data$ = this.http.get('/api/data').pipe(
  shareReplay(1)
);
  • Use takeUntil for cleanup
@Component({})
export class MyComponent implements OnDestroy {
  private destroy$ = new Subject<void>();
  
  ngOnInit() {
    this.data$.pipe(takeUntil(this.destroy$)).subscribe();
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Comments

Markdown supported