Przekazywanie danych do komponentu potomnego w Angular

Można przekazywać dane z komponentu rodzica do komponentu potomnego. Dane te będą trafiać do właściwości klasy potomnej. Zobaczmy, jak to się robi.

Na początek zróbmy w klasie komponentu potomnego właściwości, do których będą importowane dane z komponentu rodzica:

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

Teraz musimy zadeklarować, że do tych właściwości z zewnątrz będą trafiać dane. Do tego używa się specjalnego dekoratora Input. Zaimportujmy go do naszego komponentu potomnego:

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

A teraz zastosujmy ten dekorator dla naszych właściwości:

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

Dodajmy wyświetlanie danych w pliku templatki komponentu potomnego:

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

A teraz w templacie rodzica przy wywołaniu tagu komponentu potomnego napiszmy atrybuty, których nazwy będą odpowiadać nazwom naszych właściwości klasy potomnej. Wartości tych atrybutów trafią do właściwości klasy potomnej:

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