Przekazywanie danych do komponentu potomnego w Angular

Można przekazywać dane z komponentu rodzica do komponentu potomnego. Dane te będą trafiać do właściwości klasy potomnej. Zobaczmy, jak to się robi.

Na początek zróbmy w klasie komponentu potomnego właściwości, do których będą importowane dane z komponentu rodzica:

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

Teraz musimy zadeklarować, że do tych właściwości z zewnątrz będą trafiać dane. Do tego używa się specjalnego dekoratora Input. Zaimportujmy go do naszego komponentu potomnego:

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

A teraz zastosujmy ten dekorator dla naszych właściwości:

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

Dodajmy wyświetlanie danych w pliku templatki komponentu potomnego:

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

A teraz w templacie rodzica przy wywołaniu tagu komponentu potomnego napiszmy atrybuty, których nazwy będą odpowiadać nazwom naszych właściwości klasy potomnej. Wartości tych atrybutów trafią do właściwości klasy potomnej:

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