Prenos dát do podradeného komponentu v Angular

Dáta je možné prenášať z nadradeného komponentu do podradeného. Tieto dáta budú prechádzať do vlastností podradenej triedy. Pozrime sa, ako sa to robí.

Na začiatok vytvoríme v triede podradeného komponentu vlastnosti, do ktorých budú importované dáta z nadradeného komponentu:

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

Teraz musíme deklarovať, že do týchto vlastností budú zvonku vstupovať dáta. Na toto sa používa špeciálny dekorátor Input. Importujeme ho do nášho podradeného komponentu:

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

A teraz aplikujme tento dekorátor na naše vlastnosti:

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

Pridajme výstup dát do súboru šablóny podradeného komponentu:

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

A teraz v šablóne rodiča pri volaní značky podradeného komponentu napíšme atribúty, ktorých mená budú zodpovedať menám našich vlastností podradenej triedy. Hodnoty týchto atribútov prejdú do vlastností podradenej triedy:

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