Transmitindo dados para um componente filho no Angular

É possível transmitir dados do componente pai para o componente filho. Esses dados serão inseridos nas propriedades da classe filha. Vamos ver como isso é feito.

Primeiro, vamos criar propriedades na classe do componente filho, nas quais os dados serão importados do componente pai:

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

Agora precisamos declarar que dados externos serão inseridos nessas propriedades. Para isso, é usado um decorador especial Input. Vamos importá-lo para o nosso componente filho:

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

E agora vamos aplicar esse decorador às nossas propriedades:

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

Vamos adicionar a saída dos dados no arquivo de template do componente filho:

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

E agora, no template do pai, ao chamar a tag do componente filho, vamos escrever atributos cujos nomes correspondem aos nomes das nossas propriedades da classe filha. Os valores desses atributos serão inseridos nas propriedades da classe filha:

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