Angular Academy · Lektion

Signal-Inputs mit input()

Deklarieren Sie reaktive Inputs als Signals.

Signal-Inputs mit input() ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Signalbasierte Inputs

Angular bietet mit der Funktion input() eine moderne Möglichkeit, Inputs von Komponenten als Signals zu deklarieren. Sie ersetzt den klassischen Decorator @Input durch eine reaktive Alternative.

Einen Signal-Input deklarieren

Rufen Sie input() mit einem optionalen Standardwert auf. Das Ergebnis ist ein schreibgeschütztes Signal.

import { Component, input } from "@angular/core";

@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
  name = input("World");
}

Den Input auslesen

Ein Signal-Input wird ausgelesen, indem Sie ihn wie eine Funktion aufrufen – sowohl im Code als auch in Templates.

@Component({
  selector: "app-greet",
  template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
  name = input("World");
}

Vom Parent binden

Der Parent bindet einen Signal-Input genauso wie einen klassischen Input, und zwar mithilfe einer Property-Bindung.

<app-greet [name]="userName"></app-greet>

// parent
userName = "Ada";

Inputs sind schreibgeschützt

Ein einfacher input() ist innerhalb der Komponente schreibgeschützt. Sie können darauf nicht set aufrufen; nur der Parent kann seinen Wert ändern.

// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signals

Inputs typisieren

Geben Sie einen generischen Typ an, um Typsicherheit zu gewährleisten – insbesondere dann, wenn sich kein Standardwert zur Typableitung eignet.

age = input<number>();
label = input<string>("Untitled");

Inputs in berechneten Werten

Da Inputs Signals sind, lassen sie sich mit computed für abgeleitete Zustände kombinieren, die automatisch aktualisiert werden.

import { input, computed } from "@angular/core";

first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());

Inputs mit effect

Mit effect können Sie auf Änderungen von Inputs reagieren. Der Effekt wird erneut ausgeführt, sobald sich ein ausgelesenes Signal ändert.

constructor() {
  effect(() => {
    console.log("name is", this.name());
  });
}

Kein ngOnChanges erforderlich

Bei Signal-Inputs benötigen Sie ngOnChanges oft nicht mehr. computed und effect reagieren automatisch auf Änderungen.

Einen Input umbenennen

Mit der Option alias können Sie einen anderen öffentlichen Bindungsnamen bereitstellen.

value = input(0, { alias: "count" });

<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>

Warum Signal-Inputs?

Signal-Inputs sind reaktiv und typsicher und lassen sich sauber mit computed und effect kombinieren. Dadurch benötigen Sie im Vergleich zum Ansatz mit Decorator und Lifecycle weniger Boilerplate.

Schnelltest

Testen Sie Ihr Verständnis von Signal-Inputs.

Zusammenfassung

Die Funktion input() deklariert reaktive, schreibgeschützte Signal-Inputs. Lesen Sie sie durch Aufrufen aus, typisieren Sie sie mit Generics, vergeben Sie bei Bedarf Aliase und kombinieren Sie sie mit computed und effect statt mit ngOnChanges.

Häufig gestellte Fragen

Ist die Lektion „Signal-Inputs mit input()“ kostenlos?

Ja — der vollständige Text von „Signal-Inputs mit input()“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Signal-Inputs mit input()“?

Deklarieren Sie reaktive Inputs als Signals. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Signal-Inputs mit input()“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy