Posredovanje podatkov v podrejeni komponent v Angular

Podatke je mogoče posredovati iz starševske komponente v podrejeno komponento. Ti podatki bojo prišli v lastnosti podrejenega razreda. Poglejmo, kako se to naredi.

Za začetek naredimo v razredu podrejene komponente lastnosti, v katere bodo uvoženi podatki iz starševske komponente:

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

Zdaj moramo razglasiti, da bodo v te lastnosti zunanje prišli podatki. Za to se uporablja poseben dekorator Input. Uvažamo ga v našo podrejeno komponento:

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

In zdaj uporabimo ta dekorator za naše lastnosti:

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

Dodajmo izpis podatkov v datoteko predloge podrejene komponente:

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

In zdaj v predlogi starša pri klicu oznake podrejene komponente napišimo atribute, katerih imena bodo sovpadala z imeni naših lastnosti podrejenega razreda. Vrednosti teh atributov bodo prišle v lastnosti podrejenega razreda:

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