Reactivity in Angular Applications: Signals vs. Observables |Jan-Niklas Wortmann | ng-conf 2024

Explore when to use Signals vs Observables in Angular, covering refactoring strategies, state management patterns, and architectural best practices for reactive apps.

Key takeaways

Signals are always synchronous while Observables can be synchronous or asynchronous
Use Signals primarily for UI rendering and component-level state management
Use Observables for data fetching, state aggregation, and complex data transformations
When refactoring from Observables to Signals:
- Start by using toSignal() to convert Observables
- Remove $ suffix from variable names when converting to Signals
- Replace BehaviorSubject with signal()
- Use computed() instead of Observable operators
Signals have built-in value normalization, while RXJS doesn’t care about duplicate values
Race conditions are a common issue when using async/await without proper guards
Signal Store is recommended for state management instead of hand-rolling solutions
Components should primarily use Signals rather than Observables for better integration with Angular’s rendering
Applications should follow a three-tier architecture: state, abstraction, and UI layers
Consider using computed async for handling asynchronous operations with Signals

Reactivity in Angular Applications: Signals vs. Observables |Jan-Niklas Wortmann | ng-conf 2024

More talks