Angular Signals End-to-End - Reaktivität von der UI bis zur API

Angular Signals haben die Art und Weise, wie wir Zustände in der UI verwalten, grundlegend verändert. Doch lange Zeit endete diese Reaktivität an der Grenze zur Asynchronität - das Laden von Daten blieb eine alleinige Domäne von RxJS. Das ändert sich jetzt.

Mit der Einführung und Weiterentwicklung der Resource-API schließt Angular diese Lücke. Endlich ist es möglich, eine Anwendung "End-to-End" mit Signals zu denken - von der API-Antwort bis zum Update im Browser.

In diesem Workshop zeigt Felix von Thinktecture, wie moderne Angular-Applikationen von Signals und den Neuerungen in diesem Bereich profitieren können. Er erklärt praxisnah:

- Signals Grundlagen: Ein Überblick über die Core-Primitiven (Signal, Computed, Effect) und die neuen Component-APIs.
- Lückenlose Reaktivität: Wie die Resource-API das Data-Fetching vereinfacht.
- Intelligenter State: Wie linkedSignal hilft, abgeleitete veränderbare Zustände abzubilden.
- Das Beste aus beiden Welten: Wie man RxJS und Signals optimal kombiniert.

Lerne, wie du Anwendungen baust, die durchgängig reaktiv, performant und bereit für die Zukunft sind – ohne dabei bewährte Tools über Bord werfen zu müssen.

Transcript

1. Angular Signals End-to-End Reaktivität von der UI bis zur API Felix Wunderlich
2. Angular application Components are the main building blocks Consist of a TypeScript class, an HTML template, and CSS styles Component templates can use components 👉 An application is essentially a tree of components
3. Angular component without signals @Component() export class CounterComponent { counter = 0; } <p>{{ counter }}</p>
4. Angular component without signals @Component() export class CounterComponent { counter = 0; increment() { this.counter++; } } <p>{{ counter }}</p> <button (click)="increment()">Increase</button>
5. Angular component without signals @Component() export class CounterComponent { counter = 0; increment() { this.counter++; } reset() { this.counter = 0; } } <p>{{ counter }}</p> <button (click)="increment()">Increase</button> <button (click)="reset()">Reset</button>
6. Zone.js Zones are execution contexts that track asynchronous operations Achieved via monkey patching When an event or asynchronous task occurs, Zone.js notifies Angular Angular triggers change detection and updates the views
7. 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 AppComponent UsersComponent UserListComponent UserFilterComponent RadioButtonComponent
8. Downsides of Zone.js approach Reliant on Zone.js monkey patching Runs more often than necessary Sometimes leads to unpredictable behavior All template bindings need to be rechecked
9. OnPush change detection Only check when an event originates from the component or its children Will be default in v22 @Component({ changeDetection: ChangeDetectionStrategy.OnPush, }) export class CounterComponent { ... }
10. Reactive Angular with RxJS Use OnPush change detection Subscribe via async pipe Async pipe notifies change detector 👉 Only relevant components checked AppComponent UsersComponent UserListComponent UserFilterComponent RadioButtonComponent
11. Downsides of RxJS Observables are asynchronous by nature Async pipe: default null value Recheck all template bindings No reactive inputs 👉 RxJS has its place, but we need something else
12. Enter Signals Reactive primitive Hold values, notify when value changes Integrated with Angular 👉 Results in knowing exactly which nodes need updating
13. Same component as before, now with Signals @Component() export class CounterComponent { counter = signal(0); }
14. Same component as before, now with Signals @Component() export class CounterComponent { counter = signal(0); } <p>{{ counter() }}</p>
15. Same component as before, now with Signals @Component() export class CounterComponent { counter = signal(0); increment() { this.counter.update((counter) => counter + 1); } } <p>{{ counter() }}</p> <button (click)="increment()">Increase</button>
16. Same component as before, now with Signals @Component() export class CounterComponent { counter = signal(0); increment() { this.counter.update((counter) => counter + 1); } reset() { this.counter.set(0); } } <p>{{ counter() }}</p> <button (click)="increment()">Increase</button> <button (click)="reset()">Reset</button>
17. Signals API signal() Create a writable Signal 👉 () Read value 👉 .set() Set a new value 👉 .update() Update value based on current one
18. Coding time https://github.com/thinktecture/signals-workshop
19. Signals API computed() Create a read only Signal deriving its value from other Signals
20. Signals API effect() React to Signal value changes 👉 Used for side effects (e.g., persisting to browser storage) 👉 Executed once initially 👉 Reliant on injection context
21. Signals API linkedSignal() (stable since v20) Create a writable signal based on other Signals
22. Signal-based component API input() → name="Maria K" Create a read only Signal bound to a component input output() → (nameChange)="setName($event)" Create a custom event bound to a component output model() → [(name)]="name" Creates a writable Signal bound to a component input (two way binding) viewChild() / viewChildren() / contentChild() / contentChildren() Access references to elements in your view / content
23. Signals API (experimental) resource() / rxResource() Perform async operations httpResource() (experimental) Fetch data via HTTP requests
24. Changes in Angular 20 Zoneless applications are stable 👉 provideZonelessChangeDetection() 👉 Supported by ng new Fundamental reactivity primitives are stable 👉 effect() 👉 linkedSignal() Signal graph in developer tools Router: currentNavigation signal instead of getCurrentNavigation()
25. Changes in Angular 21 Zoneless as the default Experimental: Signal forms
26. Signal-based forms @Component class Profile { // data stored in signals data = signal({ first: "Maria", last: "K", }); }
27. Signal-based forms @Component class Profile { // data stored in signals data = signal({ first: "Maria", last: "K", }); // form state derived from data form = form(this.data); }
28. Signal-based forms @Component class Profile { // data stored in signals data = signal({ first: "Maria", last: "K", }); // form state derived from data form = form(this.data); } <input [formField]="form.first" placeholder="First name" /> <input [formField]="form.last" placeholder="Last name" />
29. What the future holds https://angular.dev/roadmap OnPush change detection by default in Angular 22 Signal-first approach Potential standardization of signals in the browser 👉 Less concepts to learn 👉 Better performance out of the box
30. Read more about signals in Angular 👉 https://angular.dev/guide/signals
31. Angular & AI tooling Experimental Angular MCP server Generate AI context files via CLI: ng generate ai-config
32. Thank you! Feedback? https://thinktecture.com/thinktects/felix-schuetz https://github.com/thinktecture/signals-workshop