# Angular Rxjs Interop

> Bridge Observables and Signals using toSignal and toObservable in Angular. Use when converting between RxJS Observables and Angular Signals.

- Skill: `hoangnguyen0403/angular-rxjs-interop` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add hoangnguyen0403/angular-rxjs-interop`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hoangnguyen0403/angular-rxjs-interop/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: HoangNguyen0403 (https://skillmd.com/u/hoangnguyen0403)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/hoangnguyen0403/angular-rxjs-interop

---

# RxJS Interop

## **Priority: P1 (HIGH)**

## Principles

- **Async to Sync**: Use **toSignal(observable$, { initialValue: defaultValue })** from **@angular/core/rxjs-interop** to convert Observables (HTTP, Events) to Signals for template rendering. Call in **injection context** (class field or constructor). **toSignal auto-unsubscribes** on component destroy. Provide **initialValue** to avoid `undefined`.
- **Sync to Async**: Use **toObservable(this.query)** when you need RxJS operators (**debounceTime**, **switchMap**, **distinctUntilChanged**) on Signal. Then wrap back with **toSignal()** if rendering.
- **Auto-Unsubscribe**: `toSignal` automatically unsubscribes.
- **Cleanup**: Use **takeUntilDestroyed()** for manual subscriptions in **injection contexts**. For use outside, **inject(DestroyRef)** and call `takeUntilDestroyed(destroyRef)`.

## Guidelines

- **HTTP Requests**:
 - GET: `http.get<User[]>(...).pipe(catchError(() => of([])))` -> `toSignal(..., { initialValue: [] })`. Use in templates as **{{ users() }}**.
 - Consider **httpResource()** for simpler reactive HTTP in newer versions.
 - POST/PUT: Trigger explicit subscribe() or lastValueFrom().
- **Race Conditions**: Handle async loading states. `toSignal` requires `initialValue` or handles `undefined`.

## Anti-Patterns

- **No manual subscribe in templates**: Use `toSignal()` for Observables rendered in templates.
- **No BehaviorSubject for state**: Replace with `signal()` + `toObservable()` for RxJS interop.
- **No global takeUntil**: Use `takeUntilDestroyed()` scoped to injection context. **Never use global Subject** with takeUntil — it leaks if Subject never completed.

## References

- [Signals vs Observables](references/observables-vs-signals.md)

## Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- toSignal()
- {{ users() }}