What are Angular Signals in detail and how do they compare to RxJS?
Answer
Angular Signals provide synchronous reactive primitives optimized for UI state. Comparing Signals vs RxJS: Synchronous vs Asynchronous: Signals are synchronous — reading a signal returns its current value immediately. RxJS Observables are async push-based — you subscribe and values arrive over time. When to use Signals: local component state, derived computed values, form field values, UI state (is sidebar open?), anything that's "current state now." When to use RxJS: async operations (HTTP, WebSocket, timers), event streams, combining multiple async sources, complex async orchestration (retry, debounce, switchMap). Interoperability: toSignal(observable$) — wraps an Observable as a Signal (auto-subscribes, requires injection context); toObservable(signal) — wraps a Signal as an Observable (emits when signal changes). Signal-based component inputs (Angular 17.1+): class Component { title = input.required<string>(); count = input(0); // with default onClick = output<void>(); model = model(0); // two-way binding signal }. Signal queries (Angular 17.2+): header = viewChild<HeaderComponent>("header"); buttons = viewChildren(ButtonComponent); slot = contentChild<SlotDirective>(SlotDirective); — Signal-based equivalents of @ViewChild/@ContentChild. Effect cleanup: effects can return a cleanup function: effect(() => { const subscription = stream$.subscribe(...); return () => subscription.unsubscribe(); }). Future: Signals will eventually enable Angular to run without Zone.js, enabling truly fine-grained reactivity.
Previous
What is Angular's dependency injection hierarchical injector system?
Next
What is Angular performance optimization techniques?
More Angular Questions
View all →- Advanced What is Angular Ivy and how does it improve Angular?
- Advanced How does Angular handle server-side rendering (SSR) with Hydration?
- Advanced What is Angular's dependency injection hierarchical injector system?
- Advanced What is Angular performance optimization techniques?
- Advanced What is the Angular @defer block?