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