Предаване на данни към детски компонент в 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>