Передача данных в дочерний компонент в 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>