Datan välittäminen lapsikomponenttiin Angularissa

Dataa voidaan välittää vanhempakomponentista lapsikomponenttiin. Tämä data päätyy lapsiluokan ominaisuuksiin. Katsotaan, kuinka se tehdään.

Aluksi teemme lapsikomponentin luokkaan ominaisuuksia, joihin data tuodaan vanhempakomponentista:

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

Nyt meidän on ilmoitettava, että näihin ominaisuuksiin data tullaan ulkoisesti syöttämään. Tätä varten käytetään erityistä decoratoria Input. Tuodaan se lapsikomponenttiimme:

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

Ja nyt sovellamme tätä decoratoria ominaisuuksiimme:

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

Lisätään datan tulostus lapsikomponentin templatetiedostoon:

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

Ja nyt vanhemman templatessa lapsikomponentin tagia kutsuttaessa kirjoitamme attribuutit, joiden nimet vastaavat lastenluokkamme ominaisuuksien nimiä. Näiden attribuuttien arvot päätyvät lapsiluokan ominaisuuksiin:

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