Angular Signals Gamechanger für reaktive Entwicklung Yannick Baron @yannick_baron

Angular application Components are the main building blocks Consist of a TypeScript class, an HTML template, and CSS styles Essentially define your custom DOM nodes Component templates can use more components 👉 An application is essentially a tree of components

A simple Angular component... @Component() export class CounterComponent { counter = 0; increment() { this.counter++; } reset() { this.counter = 0; } }

{{ counter }}

Increase Counter Reset 👉 note: setting a variable on the component updates the template

The Magic of Angular: Zone.js Zones are execution contexts that track asynchronous operations Achieved via monkey patching Angular creates a root zone for the application ("NgZone") When an event or asynchronous task occurs, Zone.js notifies Angular Angular triggers change detection and updates the views

Angular Change detection Start from root component Walk through the component tree Check template bindings If change detected, update DOM node Changes propagated to children

Downsides of Zone.js approach Reliant on Zone.js monkey patching Runs more often than necessary Sometimes leads to unpredictable behavior Recheck all template bindings 👉 Advanced concepts to learn to improve performance: OnPush, Immutability, runOutsideAngular, ...

Reactive Angular with RxJS Use OnPush strategy Reactive state management Subscribe via Async pipe Async pipe notifies the change detector 👉 Only check relevant components

Downsides of RxJS (for template rendering) Observables asynchronous by default AsyncPipe default null value Subscription management Recheck all template bindings No reactive inputs

Enter Signals Reactive primitive Hold value, notify when value changes Integrated with Angular 👉 Results in knowing exactly which nodes need updating

Same component as before @Component() export class CounterComponent { counter = 0; increment() { this.counter++; } reset() { this.counter = 0; } }

{{ counter }}

Increase Counter Reset

Same component as before with signals @Component() export class CounterComponent { counter = signal(0); increment() { this.counter.update((count) => count + 1); } reset() { this.counter.set(0); } }

{{ counter() }}

Increase Counter Reset

Signals API signal() Create a writable Signal set() Set a new value to the Signal update() Update the Signal's value based on its current one computed() Create a read only Signal deriving its value from other Signals

Stop ... demo time

Signals API - effect() React to signal value changes Used for side effects logging, persisting to browser storage, ... Can not write to Signals by default Reliant on the injection context

RxJS is here to stay RxJS is used to handle asynchronicity Plenty of useful operators error handling, retrying, scheduling, buffering, ... RxJS interop provided by angular toObservable / toSignal / takeUntilDestoyed Used for asynchronous side effects @ngrx/effects, ComponentStore effects

What the future holds Zone-less applications Signal based components input, output, model Signal based, synchronous APIs 👉 Less concepts to learn 👉 Better performance out of the box 👉 Less wrestling with the CD

Read more about upcoming changes 👉 https://github.com/angular/angular/discussions 👉 https://angular.io/guide/signals

Thank You! https://www.thinktecture.com/thinktects/yannick-baron