Adatátvitel a gyermek komponensbe az Angular-ban

Az adatokat át lehet adni a szülő komponensből a gyermek komponensbe. Ezek az adatok a gyermek osztály tulajdonságaiba kerülnek. Nézzük meg, hogyan is történik ez.

Először hozzunk létre a gyermek komponens osztályában olyan tulajdonságokat, amelyekbe a szülő komponensből származó adatok importálódni fognak:

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

Most azt kell deklarálnunk, hogy ezekbe a tulajdonságokba kívülről fognak adatok érkezni. Ehhez egy speciális dekorátort használunk, a Input-ot. Importáljuk ezt a gyermek komponensünkbe:

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

És most alkalmazzuk ezt a dekorátort a mi tulajdonságainkra:

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

Adjunk hozzá adatkiírást a gyermek komponens template fájljába:

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

Most pedig a szülő template-jében, a gyermek komponens tag meghívásakor írjunk olyan attribútumokat, amelyek neve megegyezik a gyermek osztály tulajdonságainak nevével. Ezeknek az attribútumoknak az értékei a gyermek osztály tulajdonságaiba kerülnek:

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