💡Hinweise und Zusatzaufgaben 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"></app-hero-detail>

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: