Angular 16 comes with a long-awaited feature “Signals”. Signals are already available other frameworks; it will be made available as developer preview in upcoming Angular 16 version.

Angular Signals – what are they?

Signals are reactive primitives i.e., Signals not only holds a value. On change of Signal Value, Signal notifies anything which depends on it. This behavior makes Signals unique and brings a new paradigm of reactivity in Angular framework.

Though Signal is reactive it should be noted –

• Signal is Synchronous unlike Rxjs.
• Signal is not a replacement for Rxjs or observables.

Signals is part of Angular core that also mean it could be used anywhere in the code. Example – Component & directive to maintain local state, component templates to display value, Angular services for local state as well as shared state.

What Signal brings in –

• Reactivity
• Granular updates – Current angular change detection uses zone.js. Due to complex nature of change detection, in case of any change (example – event handler execution) entire component hierarchy is re-evaluated for change detection. Though angular change detection is efficient, for larger application it might create application performance issue. Signal is reactive primitive. Once the signal value is changed signal notifies all the consumer. The consumer may include component template as well. This way component is updated directly without executing change detection cycle for entire component hierarchy.
• Performance – Granular updates will result more efficient change detection cycle. This will improve the application performance.
• No side effects – Signal is a pure function. Usage of Signal does not create any side effects resulting predictability and mutability within code.
• Automatic dependency tracking
• Reduced bundle size – Zone.js less change detection will result in removal of Zone.js from build artifact. Resulting reduced bundle size.

Angular Signal & Rxjs –

My point of view is Signal is not a replacement for RxJS. Rather they will work together. Rxjs is required for Async operations, example – Making http calls. Also, Rxjs is good at handling race conditions. Though Signal will help to simplify code required to achieve reactivity.

Signals are sync, we can always read current value from Signals. To read value from Rxjs/Observable it must be subscribed. The latest value would be available only when it’s published.

Rxjs/Observable usage requires explicit Subscribe/un-subscript. Signals does not require explicit subscription/un-subscription.

Final thoughts

Angular Signals is a new paradigm to achieve reactivity. A robust feature to enhance technology teams as well as application users experience.