{"id":2896,"date":"2024-06-28T08:27:22","date_gmt":"2024-06-28T06:27:22","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=2896"},"modified":"2026-04-09T11:25:51","modified_gmt":"2026-04-09T09:25:51","slug":"welche-vorteile-haben-angular-signal-inputs","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/welche-vorteile-haben-angular-signal-inputs\/","title":{"rendered":"Angular Signals Teil 3 – Welche Vorteile haben Signal Inputs?"},"content":{"rendered":"

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

Steigere die Reaktivit\u00e4t deiner Anwendung mit den Signal Inputs aus Angular 17<\/h2>\n

In den ersten beiden Beitr\u00e4gen dieser Artikelreihe, Angular Signals Teil 1 – How-to Guide f\u00fcr Angular Signals<\/a> und Angular Signals Teil 2 – Wie kombiniert man Angular Signals und RxJS<\/a>, haben wir uns angeschaut was Angular Signals sind und wie sie sich mit RxJS kombinieren lassen. Aufbauend auf diesem Wissen, wollen wir diesmal die mit der Angular Version 17 eingef\u00fchrten Signal Inputs<\/strong> genauer betrachten und herausfinden welche Vorteile sie uns in der reaktiven Programmierung bieten. Signal Inputs sind eine reaktive Alternative zu den traditionellen @Input()<\/code>-Dekoratoren und sollen den Datenaustausch zwischen Child- und Parent-Components vereinfachen. In diesem Blogartikel wird anhand eines Beispiels der klassische @Input()<\/code>-Dekorator mit dem neuen deklarativen Ansatz der Signal Inputs verglichen und auf die Vorteile der Signal Inputs eingegangen.<\/p>\n

Klassischer @Input()-Dekorator<\/h2>\n

Bevor wir uns n\u00e4her mit den Signal Inputs besch\u00e4ftigen, wollen wir einen Blick auf den @Input()-<\/code>Dekorator werfen. Der @Input<\/code>-Dekorator in Angular erm\u00f6glicht die \u00dcbergabe von Daten von einer Parent- zu einer Child-Component. Er wird in der Child-Component verwendet, um eine Property als Input zu markieren, die Daten werden dann von der Parent-Component durch Property Binding bereitgestellt. Dies ist ein grundlegender Bestandteil wiederverwendbarer Komponenten und skalierbarer Angular-Anwendungen, der eine klare Trennung der Verantwortlichkeiten und eine einfache Kommunikation zwischen Komponenten sicherstellt. Weitere Informationen zum @Input()<\/code>-Dekorator finden sich in der offiziellen Angular Dokumentation<\/a>. Wir m\u00f6chten uns das anhand unseres bereits bekannten Beispiels der geraden und ungeraden Zahlen genauer ansehen. Dabei \u00fcbergibt die Parent-Component eine inkrementierbare Zahl an die Child-Component, sobald sich diese \u00e4ndert. In der Child-Component wird dann \u00fcberpr\u00fcft, ob die Zahl gerade oder ungerade ist.<\/p>\n

Parent-Component (main.ts)<\/strong><\/p>\n

...\r\n@Component({\r\n  ...\r\n  template: `\r\n    <button (click)=\"increment()\">Increment<\/button>\r\n    <tcc-input-with-decorator [number]=\"currentNumber\"><\/tcc-input-with-decorator>\r\n`\r\n})\r\nexport class AppComponent{\r\n  currentNumber:number = 0;\r\n  increment() {\r\n    this.currentNumber++;\r\n  }\r\n}\r\n...<\/pre>\n
Die Parent-Component AppComponent<\/code> besitzt die Membervariable currentNumber<\/code>, die durch die Methode increment()<\/code> erh\u00f6ht wird. Diese Methode wird durch das Klicken des Buttons im Template ausgel\u00f6st. Die Variable wird mittels Property Binding an die Child-Component InputWithDecoratorComponent<\/code>\u00a0\u00fcbergeben.<\/p>\n
Child-Component (input-with-decorator.component.ts)<\/strong><\/p>\n
...\r\n@Component({\r\n  selector: 'tcc-input-with-decorator',\r\n  template: `<p>{{ number }} is {{ isEven ? 'Even' : 'Odd' }}<\/p>`,\r\n  ...\r\n})\r\nexport class InputWithDecoratorComponent implements OnChanges {\r\n  @Input() number: number | undefined;\r\n  isEven: boolean | undefined;\r\n\r\n  ngOnChanges(changes: SimpleChanges) {\r\n    if (changes['number']) {\r\n      this.isEven = changes['number'].currentValue % 2 === 0;\r\n      console.log('Even? ',this.isEven);\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
Die Child-Component InputWithDecoratorComponent<\/code>\u00a0empf\u00e4ngt eine Zahl von der Parent-Component \u00fcber den @Input()<\/code>-Dekorator. Die Berechnung, ob es sich bei dieser Zahl um eine gerade oder ungerade Zahl handelt, wird in der Lifecycle Methode ngOnChanges()<\/code> \u00fcberpr\u00fcft. Diese Methode wird automatisch aufgerufen, wenn sich der Eingabewert unseres @Input()<\/code>-Dekorator \u00e4ndert. Anschlie\u00dfend wird im Template angezeigt, ob es sich um eine gerade oder ungerade Zahl handelt.<\/p>\n
\n<\/picture>\n<\/picture>\n\"Angular<\/picture>\n<\/a><\/p>\n
Signal Inputs mit input()<\/h2>\n
Signal Inputs<\/a> sind eine reaktive Alternative zu den traditionellen @Input()<\/code>-Dekoratoren und sollen den Datenaustausch zwischen Child- und Parent-Component vereinfachen. Sie eignen sich sowohl f\u00fcr Komponenten als auch Direktiven. Die Initialisierung\/Deklaration ist sehr simpel:<\/p>\n
number = input(0);       \/\/ InputSignal<number>\r\nname = input<string>();  \/\/ InputSignal<string|undefined><\/pre>\n
Der Input kann, wie bei der Variable number<\/code>, mit einem Wert initialisiert werden. Andernfalls wird, wie bei der Variable name<\/code>, automatisch undefined verwendet. Bei diesen Signal Inputs handelt es sich um optionale<\/strong> Inputs. Die required<\/strong> Inputs werden im Absatz Optionen<\/a> behandelt.<\/p>\n
Die Klasse InputSignal<T><\/code> erweitetert die Signal<T><\/code> Klasse und kann dadurch innerhalb des Signal-Kontext verwendet werden. Dadurch k\u00f6nnen wir auf die Methoden effect()<\/code>\u00a0und computed()<\/code> zugreifen.<\/p>\n
 export class InputSignal<T> extends Signal<T> { ... }<\/pre>\n
@Input() durch Signal Input ersetzen<\/h2>\n
Nun wollen wir das vorherige Beispiel anhand von Signal Inputs darstellen. Zun\u00e4chst betrachten wir wieder die Parent-Component. Erfreulicherweise muss nur der Selektor der Komponente angepasst werden. Die Werte k\u00f6nnen wie bisher per Property Binding im Template an die Child-Component \u00fcbergeben werden.<\/p>\n
Parent-Component (app.component.ts)<\/strong><\/p>\n
...\r\n@Component({\r\n  ...\r\n  template: `\r\n    ...\r\n    <tcc-signal-input [number]=\"currentNumber\"><\/tcc-signal-input>`,\r\n})\r\nexport class AppComponent{\r\n  ...\r\n}\r\n<\/pre>\n
computed() statt ngOnChanges()<\/h3>\n
Bei der Child-Component gibt es ein paar mehr \u00c4nderungen:
\nDie Membervariable number<\/code> wurde zu einem Signal Input umgewandelt. Anstatt auf Ver\u00e4nderungen durch die ngOnChanges()<\/code>-Lifecycle Methode zu reagieren, nutzen wir die computed()<\/code>-Funktion. Die Funktion computed()<\/code> ist nicht spezifisch f\u00fcr Signal Inputs, sondern kann, wie zuvor erw\u00e4hnt, f\u00fcr jede Art von Signal verwendet werden. In unseren vorherigen Artikeln haben wir beschrieben, dass es ich dabei um ein readonly Signal handelt, das seinen Wert aus anderen Signals ableitet. Die Funktion wird ausgef\u00fchrt, sobald sich ein Signal innerhalb der Callback-Funktion \u00e4ndert. In unserem Fall also, wenn number<\/code> durch die Parent-Component inkrementiert wird.
\nWichtig zu beachten ist, dass auf den Wert eines Signal (Inputs) immer mit einem Funktionsaufruf ()<\/code> zugegriffen wird, ansonsten wird ein Error ausgegeben.<\/p>\n
Child-Component (signal-input.component.ts)<\/strong><\/p>\n
...\r\n@Component({\r\n  ...\r\n  selector: 'tcc-signal-input',\r\n  template: `<p>{{ number() }} is {{ isEven() ? 'Even' : 'Odd' }}<\/p>`,\r\n})\r\nexport class SignalInputComponent {\r\n  number = input<number>(0);\r\n\r\n  isEven = computed(() => this.number() % 2 === 0);\r\n\r\n  sideEffect = effect(() => {\r\n  console.log('Even? ', this.isEven());\r\n  });\r\n\r\n}<\/pre>\n
Die Funktion effect()<\/code> erm\u00f6glicht es uns festzulegen, welche Aktionen ausgef\u00fchrt werden sollen, wenn sich der Wert eines Signals \u00e4ndert oder welche Nebeneffekte auftreten sollen. In unserem Beispiel verwenden wir eine einfache console.log()<\/code>-Anweisung, die ausgef\u00fchrt wird, wenn sich das Signal isEven()<\/code> \u00e4ndert. Diese Funktion kann besonders n\u00fctzlich z.B. in Strukturdirektiven verwendet werden, um das Verhalten von DOM-Elementen in Angular basierend auf Bedingungen oder Ereignissen anzupassen oder zu erweitern. Dadurch k\u00f6nnen DOM-Elemente je nach Bedarf hinzugef\u00fcgt oder entfernt werden.<\/p>\n
Optionen f\u00fcr Signal Inputs<\/h2>\n
Signal Inputs besitzen die gleichen Optionen wie @Input()<\/code>. Wir werden nun darauf eingehen wie du diese Optionen bei Signal Inputs verwenden kannst.<\/p>\n
required<\/h3>\n
Um ein Signal Input als erforderlich zu kennzeichnen, k\u00f6nnen wir required<\/a> verwenden:<\/p>\n
number = input.required<number>();<\/pre>\n
Ohne diese Option ist der Input optional und muss nicht von der Parent-Component \u00fcbergeben werden. Ist der Signal Input required, erhalten wir einen Error, wenn wir im Parent-Component keinen Wert mitgeben.<\/p>\n
alias<\/h3>\n
Auch einen alias<\/a>\u00a0k\u00f6nnen wir f\u00fcr unser Signal Input bestimmen:<\/p>\n
number = input<number>({alias:\"counter\");<\/pre>\n
Nun k\u00f6nnen wir unsere Daten durch Property Binding mit der counter<\/code>-Property \u00fcbergeben:<\/p>\n
<tcc-signal-input [counter]=\"currentNumber\"><\/tcc-signal-input>`,\r\n<\/pre>\n
transform()<\/h3>\n
Mit der Funktion transform()<\/a> kann der Wert der Input Property transformiert werden, bevor er \u00fcber das Signal Input ausgegeben wird. Im folgenden Beispiel wird der Input-Wert mit 2 multipliziert, bevor er \u00fcber das Signal Input ausgegeben wird:<\/p>\n
 number = input(0, {\r\n    transform: (value: number): number => {\r\n      return value * 2;\r\n    }\r\n  });<\/pre>\n
Was sind nun die Vorteile von Signal Inputs?<\/h2>\n
Signal Inputs bieten eine direkte und reaktive Alternative zu @Input()<\/code> und damit zahlreiche Vorteile. Der Hauptvorteil zeigt sich besonders, wenn Komponenten bereits in einem reaktiven Stil mit Signals entwickelt wurden. Mit Signal Inputs k\u00f6nnen nun auch Inputs verwendet werden, die wiederum Signals sind. Dadurch k\u00f6nnen wir den Funktionsumfang der Signals voll ausnutzen, indem wir computed()<\/code> und effect()<\/code> verwenden, um auf Wertver\u00e4nderungen zu reagieren, anstatt beispielsweise ngOnChanges<\/code> oder Setter zu verwenden. Ein weiterer Vorteil von Signal Inputs, auf den wir im Beispiel nicht explizit eingegangen sind, ist, dass sie automatisch OnPush Komponenten als dirty markieren, was eine effizientere Aktualisierung der UI erm\u00f6glicht. Zudem bieten Signal Inputs die gleichen Optionen wie @Input()<\/code>, einschlie\u00dflich der M\u00f6glichkeiten, Inputs als required<\/code> zu kennzeichnen, alias<\/code> zu verwenden und transform<\/code> anzuwenden. Die gewohnten Verwendungsm\u00f6glichkeiten bleiben also erhalten.<\/p>\n
Erfahrung ist der beste Lehrer: Hands-On mit Signal Inputs<\/h2>\n
Bist Du bereit, die Theorie in die Praxis umzusetzen? In diesem interaktiven StackBlitz-Beispiel befindet sich die vorgestellte Beispielanwendung, die die Grundkonzepte von Signal Inputs aufgreift und alle vorgestellten Beispiele und Funktionen beinhaltet. Tauche ein und experimentiere, um Signals und Signal Inputs in Aktion zu erleben!<\/p>\n