Перадача даных у даччыны кампанент у Angular

Можна перадаваць даныя з бацькоўскага кампанента ў даччыны. Гэтыя даныя будуць трапляць у ўласцівасці даччынага класа. Давайце паглядзім, як гэта робіцца.

Для пачатку зробім у класе даччынага кампанента ўласцівасці, у якія будуць імпартавацца даныя з бацькоўскага кампанента:

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

Цяпер нам трэба аб'явіць, што ў гэтыя ўласцівасці звонку будуць трапляць даныя. Для гэтага выкарыстоўваецца спецыяльны дэкаратар Input. Імпартуем яго ў наш даччыны кампанент:

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

А цяпер прымянім гэты дэкаратар для нашых уласцівасцей:

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

Дадамо вывод даных у файл тэмплейта даччынага кампанента:

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

А цяпер у тэмплейце бацькі пры выкліку тэга даччынага кампанента напішам атрыбуты, назвы якіх будуць супадаць з назвамі нашых уласцівасцей даччынага класа. Значэнні гэтых атрыбутаў трапяць у ўласцівасці даччынага класа:

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