[Update v20] Angular Guide – Überblick zu allen Signal Themen und Hot Topics

Go here for the english version of this blog post.

Verschaffe Dir ganz einfach einen Überblick über alle Signal-bezogenen Themen und Hot Topics in Angular

Mittlerweile ist unsere Angular Signals Reihe ordentlich gewachsen, weshalb wir dachten, dass es so langsam mal an der Zeit ist, alle Blogartikel zu sammeln und kurz zusammenzufassen.

Angular Signals Teil 1 – How-to Guide für Angular Signals

In unserem ersten Artikel stellen wir Dir Angular Signals überhaupt mal vor und erklären welches Performanceproblem sie lösen. Wir gehen auch darauf ein, welche Vorteile sie als Reactive Primitives noch haben und wie sie sich positiv auf das State Management deiner Angular Anwendung auswirken.

Natürlich zeigen wir Dir anhand von Code Beispielen auch, wie du Signals verwendest und was der Unterschied zwischen der set() und update() Methode ist. Die Kombination von mehreren Signals und wie sie miteinander interagieren können, demonstrieren wir mit den Funktionen computed(), effect() und untracked().

Angular Signals Teil 2 – Wie kombiniert man Angular Signals und RxJS

Warum RxJS von Signals nicht abgelöst wird und wie gut die beiden Technologien zusammenarbeiten können, ist das Thema des zweiten Beitrags. Wir stellen Dir die Stärken und Schwächen der Ansätze vor und zeigen für welches Aufgabengebiet sie sich am besten eignen.
Eine wichtige Rolle bei der Kombination von Signals und RxJS spielen dabei die Funktionen toSignal() und toObservable().

Zusätzlichen erläutern wir auch, wie die Funktionen toLazySignal() und connect() von ngxtension die Arbeit mit Signals noch einfacher machen.

Angular Signals Teil 3 – Welche Vorteile haben Signal Inputs?

Im dritten Teil gehen wir darauf ein, wie du durch die Umstellung des @Input-Dekorators auf Signal Inputs die Reaktivität deiner Angular Anwendung steigern kannst.
Nachdem wir den klassischen @Input-Dekorator kurz erläutert haben, haben wir danach die Signal Inputs und ihre Optionen required, alias und transform() vorgestellt.

Wir haben die Ansätze für Dich miteinander verglichen und in einem Fazit die Vorteile der Signal Inputs festgehalten.

Angular Signals Teil 4 – Ganz einfach zu Signals migrieren

Die vorherigen Artikel haben gezeigt, welche Vorteile Signals mit sich bringen und wie sich die Reaktivität und Performace Deiner Angular Anwendung verbessern lässt. In Teil vier stellen wir dir zwei äußerst nützliche Commands von ngxtension vor, mit denen Du Deinen Code ganz einfach migrieren und Signal-ready machen kannst.

Das ist zum einen der Command für die Migration von @Input zu Signal Inputs und zum anderen die Umstellung von @Output auf die neue output() Schreibweise.

Angular Signals Teil 5 – Schritt für Schritt zu Signal Directives

Im fünften Teil der Angular Signals Reihe, bauen wir eine klassische Struktur-Direktive mit Observables und ngOnChanges()-Hook auf einen Signal-basierten Ansatz um. Dabei gehen wir Schritt für Schritt vor und erklären dir was passiert.
Insbesondere gehen wir auf die Funktionen inject(), toSignal() und effect() ein und ersetzen den @Input()-Dekorator und den ngOnChanges()-Hook.

Angular Signals Teil 6 – Was sind Linked Signals?

Im aktuell letzten Teil in der Angular Signals Reihe, erklären wir was Linked Signals sind, wie man sie optimal nutzt und welche Lücke sie schließen.
Dabei gehen wir natürlich auf die Funktion linkedSignal() ein und auf die Unterschiede zu signal() und computed().

Reactive APIs in Angular Teil 1 – Resource API resource() und rxResource()

Neu in Angular 19 und erweitert in v20 stellen wir Dir die neue Resource API vor, mit welcher Du asynchrone Requests endlich mit Angular Signals verbinden kannst!
In diesem ersten Teil gehen wir dabei auf die Funktionen resource() und rxResource() ein und erklären Dir, wie die Resource API funktioniert und wann du die beiden Funktionen am besten verwendest.

Reactive APIs in Angular Teil 2 – Resource API httpResource()

Wie versprochen kommt hier Teil 2 zur Angular Resource API, diesmal mit der httpResource() Funktion. Wir zeigen Dir wie einfach du jetzt asynchrone HTTP-Requests mit synchronen Signals verknüpfen kannst. Natürlich stellen wir hier auch alle drei Funktionen der Resource API gegenüber, vergleichen sie und sagen Dir, welche Funktion wann die Richtige ist.

Welche Themen kommen als Nächstes?

Nach der sehr nützlichen Resource API, machen wir genauso nützlich weiter und stellen Dir die @let Syntax aus ng18 vor. Die größeren Themen wie Incremental Hydration und Server Side Rendering sind natürlich auch weiter in der Pipeline. Du kannst Dich also auf viele interessante Artikel freuen! Selbstverständlich updaten wir auch diesen Post, damit Du Dir immer schnell einen Überblick verschaffen kannst.

Terminübersicht der nächsten Angular Schulungen

Related posts:

[Update v20] Angular Guide – Overview of all Signal topics and other highlights Reactive APIs in Angular Teil 1 – Resource API resource() und rxResource() Reactive APIs in Angular Part 1 – Resource API resource() and rxResource() Reactive APIs in Angular Teil 2 – Resource API httpResource()