Prosleđivanje podataka u podređenu komponentu u Angularu

Podaci se mogu proslediti iz roditeljske komponente u podređenu. Ovi podaci će završiti u svojstvima klase podređene komponente. Pogledajmo kako se to radi.

Za početak, napravićemo svojstva u klasi podređene komponente u koja će se uvesti podaci iz roditeljske komponente:

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

Sada moramo da deklarišemo da će se u ova svojstva spolja unositi podaci. Za ovo se koristi specijalni dekorator Input. Uvezi ga u našu podređenu komponentu:

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

A sada primenimo ovaj dekorator na naša svojstva:

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

Dodajmo prikaz podataka u fajl šablona podređene komponente:

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

A sada, u šablonu roditelja prilikom poziva taga podređene komponente, napišimo atribute čija imena će se poklapati sa imenima naših svojstava klase podređene komponente. Vrednosti ovih atributa će upasti u svojstva klase podređene komponente:

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