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.

Unsere Angular Schulungen sind wie wir, und jetzt auch Du, immer auf dem neusten Stand. Wenn du noch mehr über Signals lernen und Tipps und Tricks zu Angular erfahren möchtest, besuche einen unserer Angular-Kurse:

• Angular Basic Schulung: https://www.thecodecampus.de/schulungen/angular
• Advanced Schulung: https://www.thecodecampus.de/schulungen/angular-advanced
• Aktuelle Schulungstermine

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 aktuell letzten Teil in 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.

Welche Themen kommen als Nächstes?

Mit Angular v19 gibt es bereits neue Features für Angular Signals und andere spannende Highlights, wie die Resource API und Incremental Hydration. 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