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