RxJS Interop

Bridging Observables and Signals using toSignal and toObservable.

fierzone Updated

File contents

RxJS Interop

Priority: P1 (HIGH)

Principles

  • Async to Sync: Use toSignal to convert Observables (HTTP, Events) to Signals for template rendering.
  • Sync to Async: Use toObservable when you need RxJS operators (debounce, switchMap) on a Signal.
  • Auto-Unsubscribe: toSignal automatically unsubscribes.
  • Cleanup: Use takeUntilDestroyed for manual subscriptions in injection contexts.

Guidelines

  • HTTP Requests:
    • GET: http.get().pipe(...) -> toSignal()
    • POST/PUT: Trigger explicit subscribe() or lastValueFrom().
  • Race Conditions: Handle async loading states. toSignal requires an initialValue or handles undefined.

References

  • Signals vs Observables

fierzone/agent-skills-standard/tree/main/skills/angular/rxjs-interop commit 3bb2c40608

Frequently asked questions

npx skillmds@latest add fierzone/rxjs-interop