Datenübergabe an eine untergeordnete Komponente in Angular

Daten können von einer übergeordneten Komponente an eine untergeordnete Komponente übergeben werden. Diese Daten gelangen in die Eigenschaften der untergeordneten Klasse. Sehen wir uns an, wie das gemacht wird.

Erstellen wir zunächst in der Klasse der untergeordneten Komponente Eigenschaften, in die Daten aus der übergeordneten Komponente importiert werden:

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

Jetzt müssen wir deklarieren, dass in diese Eigenschaften von außen Daten gelangen werden. Dafür wird ein spezieller Dekorator Input verwendet. Importieren wir ihn in unsere untergeordnete Komponente:

import { Input } from '@angular/core';

Und nun wenden wir diesen Dekorator auf unsere Eigenschaften an:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

Fügen wir die Datenausgabe in die Template-Datei der untergeordneten Komponente hinzu:

<p>{{ name }}</p>
<p>{{ age }}</p>

Und nun schreiben wir im Template des Elternteils beim Aufruf des Tags der untergeordneten Komponente Attribute, deren Namen mit den Namen unserer Eigenschaften der untergeordneten Klasse übereinstimmen. Die Werte dieser Attribute gelangen in die Eigenschaften der untergeordneten Klasse:

<user-data name="john" age="25"></user-data>