💡Hinweise zu Kapitel 3

Das Vorgehen wie eine Komponente erstellt wird und was die einzelnen Referenzierungen bedeuten kennst du bereits.

Input()

Du hast die Möglichkeit Daten in eine Komponente hineinzugeben, dazu muss zu erst im *.ts File der Child Komponente ein Input deklariert werden. Dies machst du folgendermassen:

@Input() hero?: Hero;

Nun kannst du in der Parent Komponente die Child Komponente aufrufen und notwendige Inputs gleich mit hineingeben.

<app-hero-detail [hero]="hero"/>

Input Variablen - Non-null Assertion Operator

@Component({
  selector: 'app-dashboard[title]',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  standalone: true,
})
export class DashboardComponent {
  title!: string;
  constructor() {}
}

Wie unter der Rubrik "Tipps & Tricks" erklärt gibt es die Möglichkeit den non-null assertion operator bei Komponenten zu verwenden. In diesem Beispiel deklarieren wir im @Component unter selector in den eckigen Klammern [title]. Somit wird bei der Verwendung der Komponente direkt ein Fehler ausgegeben, sofern kein Wert für title mitgegeben wurde. Dadurch kann ! ohne Bedenken verwendet werden.

Verwendung der Komponente ohne der Mitgabe von title wird nicht als eine bekannte Komponente erkannt:

Verwendung der Komponente mit der Mitgabe von title wird als eine bekannte Komponente erkannt:

Verwendung von input Signal

Seit Angular 17 werden offiziell Signals unterstützt, wodurch die reaktive Programmierung und das State Management in Angular-Anwendungen vereinfacht und verbessert wurden. Offiziell ist die Deklaration @Input noch unterstützt, jedoch wird diese Notation irgendwann deprecated.

Folgendermassen kannst du Signal verwenden um einer Childkomponente Daten zu übergeben:

export class HeroDetailComponent {
  hero = input<Hero>();
}

Den Inhalt eines Signals kannst du durch die Verwendung von Klammern erhalten, siehe Codeausschnitt unterhalb.

@if (hero(); as hero) {
  <div>
    <h2>{{ hero.name | uppercase }} Details</h2>
    ...
  </div>
}

Durch die lokale Variable hero, die in diesem Beispiel durch as hero erzeugt wird, brauchen wir den Wert des Signals nicht ständig mit Klammern abzurufen.

Die Übergabe der Variable bleibt weiterhin 1:1 gleich, wie wir es bereits vorher angesehen haben.

<app-hero-detail [hero]="selectedHero" />

Mit der Nutzung von Signals bereitest du dich auf eine bewärte Technik vor, welche in vielen Frontend Frameworks verwendet wird.

Input erzwingen

Im oberen Kapitel haben wir gelernt wie durch die Verwendung von "Non-null Assertion Operator" der Input von Daten erzwungen werden kann. Seit der Verwendung von Signals kann dies erheblich vereinfacht werden.

  hero = input.required<Hero>();  

Dies erzwingt die aufrufende Parent Komponente den notwendigen Input mitzugeben.