{"id":3164,"date":"2025-02-07T14:13:41","date_gmt":"2025-02-07T13:13:41","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=3164"},"modified":"2026-04-09T14:36:40","modified_gmt":"2026-04-09T12:36:40","slug":"angular-guide-signals-und-hot-topics","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/angular-guide-signals-und-hot-topics\/","title":{"rendered":"[Aktuell mit v21] Angular Guide – \u00dcberblick zu allen Signal Themen und Hot Topics"},"content":{"rendered":"

Go here for the english version of this blog post.<\/a><\/em><\/strong><\/p>\n

Verschaffe Dir ganz einfach einen \u00dcberblick \u00fcber alle Signal-bezogenen Themen und Hot Topics in Angular<\/h2>\n

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.<\/p>\n

Angular Signals Teil 1 – How-to Guide f\u00fcr Angular Signals<\/a><\/h2>\n

In unserem ersten Artikel stellen wir Dir Angular Signals \u00fcberhaupt mal vor und erkl\u00e4ren welches Performanceproblem sie l\u00f6sen. 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.<\/p>\n

Nat\u00fcrlich zeigen wir Dir anhand von Code Beispielen auch, wie du Signals verwendest und was der Unterschied zwischen der set()<\/code> und update()<\/code> Methode ist. Die Kombination von mehreren Signals und wie sie miteinander interagieren k\u00f6nnen, demonstrieren wir mit den Funktionen computed()<\/code>, effect()<\/code> und untracked()<\/code>.<\/p>\n

Angular Signals Teil 2 – Wie kombiniert man Angular Signals und RxJS<\/a><\/h2>\n

Warum RxJS von Signals nicht abgel\u00f6st wird und wie gut die beiden Technologien zusammenarbeiten k\u00f6nnen, ist das Thema des zweiten Beitrags. Wir stellen Dir die St\u00e4rken und Schw\u00e4chen der Ans\u00e4tze vor und zeigen f\u00fcr welches Aufgabengebiet sie sich am besten eignen.
\nEine wichtige Rolle bei der Kombination von Signals und RxJS spielen dabei die Funktionen toSignal()<\/code> und toObservable()<\/code>.<\/p>\n

Zus\u00e4tzlichen erl\u00e4utern wir auch, wie die Funktionen toLazySignal()<\/code> und connect()<\/code> von ngxtension<\/a> die Arbeit mit Signals noch einfacher machen.<\/p>\n

Angular Signals Teil 3 – Welche Vorteile haben Signal Inputs?<\/a><\/h2>\n

Im dritten Teil gehen wir darauf ein, wie du durch die Umstellung des @Input<\/code>-Dekorators auf Signal Inputs die Reaktivit\u00e4t deiner Angular Anwendung steigern kannst.
\nNachdem wir den klassischen @Input<\/code>-Dekorator kurz erl\u00e4utert haben, haben wir danach die Signal Inputs und ihre Optionen required<\/code>, alias<\/code> und transform()<\/code> vorgestellt.<\/p>\n

Wir haben die Ans\u00e4tze f\u00fcr Dich miteinander verglichen und in einem Fazit die Vorteile der Signal Inputs festgehalten.<\/p>\n

\n<\/picture> <\/picture> \"Angular<\/picture> <\/a><\/p>\n

Angular Signals Teil 4 – Ganz einfach zu Signals migrieren<\/a><\/h2>\n

Die vorherigen Artikel haben gezeigt, welche Vorteile Signals mit sich bringen und wie sich die Reaktivit\u00e4t und Performace Deiner Angular Anwendung verbessern l\u00e4sst. In Teil vier stellen wir dir zwei \u00e4u\u00dferst n\u00fctzliche Commands von ngxtension<\/a> vor, mit denen Du Deinen Code ganz einfach migrieren und Signal-ready machen kannst.<\/p>\n

Das ist zum einen der Command f\u00fcr die Migration von @Input<\/code> zu Signal Inputs und zum anderen die Umstellung von @Output<\/code> auf die neue output()<\/code> Schreibweise.<\/p>\n

Angular Signals Teil 5 – Schritt f\u00fcr Schritt zu Signal Directives<\/a><\/h2>\n

Im f\u00fcnften Teil der Angular Signals Reihe, bauen wir eine klassische Struktur-Direktive mit Observables und ngOnChanges()<\/code>-Hook auf einen Signal-basierten Ansatz um. Dabei gehen wir Schritt f\u00fcr Schritt vor und erkl\u00e4ren dir was passiert.
\nInsbesondere gehen wir auf die Funktionen inject()<\/code>, toSignal()<\/code> und effect()<\/code> ein und ersetzen den @Input()<\/code>-Dekorator und den ngOnChanges()<\/code>-Hook.<\/p>\n

Angular Signals Teil 6 – Was sind Linked Signals?<\/a><\/h2>\n

Im aktuell letzten Teil in der Angular Signals Reihe, erkl\u00e4ren wir was Linked Signals sind, wie man sie optimal nutzt und welche L\u00fccke sie schlie\u00dfen.
\nDabei gehen wir nat\u00fcrlich auf die Funktion linkedSignal()<\/code> ein und auf die Unterschiede zu signal()<\/code> und computed()<\/code>.<\/p>\n

Reactive APIs in Angular Teil 1 – Resource API resource() und rxResource()<\/a><\/h2>\n

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!
\nIn diesem ersten Teil gehen wir dabei auf die Funktionen resource()<\/code> und rxResource()<\/code> ein und erkl\u00e4ren Dir, wie die Resource API funktioniert und wann du die beiden Funktionen am besten verwendest.<\/p>\n

Reactive APIs in Angular Teil 2 – Resource API httpResource()<\/a><\/h2>\n

Wie versprochen kommt hier Teil 2 zur Angular Resource API, diesmal mit der httpResource()<\/code> Funktion. Wir zeigen Dir wie einfach du jetzt asynchrone HTTP-Requests mit synchronen Signals verkn\u00fcpfen kannst. Nat\u00fcrlich stellen wir hier auch alle drei Funktionen der Resource API gegen\u00fcber, vergleichen sie und sagen Dir, welche Funktion wann die Richtige ist.<\/p>\n

Signal Forms – Schnell reaktive Formulare in Angular<\/a><\/h2>\n

Angular 21 revolutioniert mit Signal Forms die Art, wie wir Formulare bauen. Aktuell noch in der Developer Preview bieten uns die Signal Forms einen schnelleren, typsicheren und effizienteren Weg, um reaktive Formulare umzusetzen. In diesem Artikel erf\u00e4hrst du, wie Signal Forms funktionieren und eben auch, warum sie so revolution\u00e4r sind.<\/p>\n

Welche Themen kommen als N\u00e4chstes?<\/h2>\n

Wir wollen das Thema Signal Forms noch weiter vertiefen und werden uns in den n\u00e4chsten Artikeln weiter damit auseinandersetzen, um Dir einen umfangreichen \u00dcberblick geben zu k\u00f6nnen. Wir werden uns unter anderem die Validierung und das Erstellen von Custom Controls genau anschauen. Du kannst Dich also auf viele interessante Artikel freuen! Selbstverst\u00e4ndlich updaten wir auch diesen Post, damit Du Dir immer schnell einen \u00dcberblick verschaffen kannst.<\/p>\n

Termin\u00fcbersicht der n\u00e4chsten Angular Schulungen<\/h2>\n