Prosleđivanje podataka u podređenu komponentu u Angularu

Podaci se mogu proslediti iz roditeljske komponente u podređenu. Ovi podaci će završiti u svojstvima klase podređene komponente. Pogledajmo kako se to radi.

Za početak, napravićemo svojstva u klasi podređene komponente u koja će se uvesti podaci iz roditeljske komponente:

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

Sada moramo da deklarišemo da će se u ova svojstva spolja unositi podaci. Za ovo se koristi specijalni dekorator Input. Uvezi ga u našu podređenu komponentu:

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

A sada primenimo ovaj dekorator na naša svojstva:

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

Dodajmo prikaz podataka u fajl šablona podređene komponente:

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

A sada, u šablonu roditelja prilikom poziva taga podređene komponente, napišimo atribute čija imena će se poklapati sa imenima naših svojstava klase podređene komponente. Vrednosti ovih atributa će upasti u svojstva klase podređene komponente:

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