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