Datan välittäminen lapsikomponenttiin Angularissa

Dataa voidaan välittää vanhempakomponentista lapsikomponenttiin. Tämä data päätyy lapsiluokan ominaisuuksiin. Katsotaan, kuinka se tehdään.

Aluksi teemme lapsikomponentin luokkaan ominaisuuksia, joihin data tuodaan vanhempakomponentista:

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

Nyt meidän on ilmoitettava, että näihin ominaisuuksiin data tullaan ulkoisesti syöttämään. Tätä varten käytetään erityistä decoratoria Input. Tuodaan se lapsikomponenttiimme:

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

Ja nyt sovellamme tätä decoratoria ominaisuuksiimme:

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

Lisätään datan tulostus lapsikomponentin templatetiedostoon:

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

Ja nyt vanhemman templatessa lapsikomponentin tagia kutsuttaessa kirjoitamme attribuutit, joiden nimet vastaavat lastenluokkamme ominaisuuksien nimiä. Näiden attribuuttien arvot päätyvät lapsiluokan ominaisuuksiin:

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