angular-signals

Use the toSignal() function to convert RxJS Observables into Angular Signals, bridging reactive streams into signal-based state for predictable UI updates. This enables gradual migration from Subjects to signal state management without rewriting entire components.

Manage side effects in Angular Signals using the effect() function with onCleanup for analytics, timers, and external integrations. Avoid nested effects to ensure deterministic state updates and prevent memory leaks during component teardown.

Angular Signals supports derived state through the computed() function, creating computed signals that automatically update when dependencies change. This maintains predictable UI rendering without manual change detection triggers.

Use the input() function to create signal inputs for reactive component inputs in Angular v16+. This replaces traditional @Input decorators with signal-based values that integrate directly with computed() and effect() functions.

Avoid nested effects in Angular Signals because they cause unpredictable state updates and memory leaks. Effects should track dependencies dynamically at the top level; nesting them breaks deterministic rendering and proper cleanup patterns.

Bridge Angular Signals back to RxJS Observables using the toObservable() function. This allows signal state changes to be consumed as observable streams, enabling interop with RxJS operators while maintaining signal-based state management.