Передача данных в дочерний компонент в Angular

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

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

app/user/user.component.tsclass UserComponent {
  public name: string = '';
  public age: number = 0;
}

Теперь нам нужно объявить, что в эти свойства извне будут попадать данные. Для этого используется специальный декоратор Input. Импортируем его в наш дочерний компонент:

app/user/user.component.tsimport { Input } from '@angular/core';

А теперь применим этот декоратор для наших свойств:

app/user/user.component.tsclass UserComponent {
  @Input()
  public name: string = '';
  
  @Input()
  public age: number = 0;
}

Добавим вывод данных в файл темплейта дочернего компонента:

app/user/user.component.html<p>{{ name }}</p>
<p>{{ age }}</p>

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

app/app.component.html<user-data name="john" age="25"></user-data>