Předávání dat do podřízené komponenty v Angular

Lze předávat data z rodičovské komponenty do podřízené. Tato data budou přicházet do vlastností podřízené třídy. Podívejme se, jak se to dělá.

Nejprve vytvoříme ve třídě podřízené komponenty vlastnosti, do kterých budou importována data z rodičovské komponenty:

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

Nyní musíme deklarovat, že do těchto vlastností budou zvenčí přicházet data. K tomu se používá speciální dekorátor Input. Importujeme jej do naší podřízené komponenty:

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

A nyní aplikujme tento dekorátor na naše vlastnosti:

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

Přidejme výpis dat do souboru templatu podřízené komponenty:

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

A nyní v templatu rodiče při volání tagu podřízené komponenty napíšeme atributy, jejichž názvy budou odpovídat názvům našich vlastností podřízené třídy. Hodnoty těchto atributů přijdou do vlastností podřízené třídy:

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