Předávání dat do podřízené komponenty v Angular

Lze předávat data z rodičovské komponenty do podřízené. Tato data budou přicházet do vlastností podřízené třídy. Podívejme se, jak se to dělá.

Nejprve vytvoříme ve třídě podřízené komponenty vlastnosti, do kterých budou importována data z rodičovské komponenty:

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

Nyní musíme deklarovat, že do těchto vlastností budou zvenčí přicházet data. K tomu se používá speciální dekorátor Input. Importujeme jej do naší podřízené komponenty:

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

A nyní aplikujme tento dekorátor na naše vlastnosti:

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

Přidejme výpis dat do souboru templatu podřízené komponenty:

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

A nyní v templatu rodiče při volání tagu podřízené komponenty napíšeme atributy, jejichž názvy budou odpovídat názvům našich vlastností podřízené třídy. Hodnoty těchto atributů přijdou do vlastností podřízené třídy:

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