Angular Signals: Neue Features für die reaktive Entwicklung

Angular Signals sind seit einiger Zeit ein spannender Bestandteil der reaktiven Entwicklung in Angular. Mit neuen Features wie linkedSignal() und resource() seit Angular 20 rücken sie weiter in den Fokus.

Doch wie funktionieren Signals und was macht sie so besonders – insbesondere in Bezug auf die Performance? Welche Vorteile bieten sie gegenüber klassischen RxJS-Patterns?

Felix von Thinktecture gibt eine praxisnahe Einführung in Angular Signals und die damit verbundenen neuen Features und zeigt, wie sie die Entwicklung von modernen, reaktiven Anwendungen nachhaltig verändern. Zusätzlich gibt er einen Ausblick auf die geplante Unterstützung von Signal-basierten Formularen.

Transcript

3. @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>
5. AppComponent UsersComponent UserListComponent UserFilterComponent RadioButtonComponent
6. OnPush runOutsideAngular
7. OnPush AppComponent UsersComponent UserListComponent UserFilterComponent RadioButtonComponent
10. @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>
11. signal() () .set() .update()
13. computed()
14. effect()
15. linkedSignal()
16. input() name="Maria K" output() (nameChange)="setName($event)" model() [(name)]="name" viewChild() viewChildren() contentChild() contentChildren()
17. resource()
18. httpResource()
19. provideZonelessChangeDetection() ng new effect() linkedSignal() currentNavigation getCurrentNavigation()
21. @Component class Profile { // data stored in signals data = signal({ first: "Maria", last: "K", }); // form state derived from data form = form(this.data); } <input [field]="form.first" placeholder="First name" /> <input [field]="form.last" placeholder="Last name" />