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:

class 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:

import { Input } from '@angular/core';

E agora vamos aplicar esse decorador às nossas propriedades:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

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

<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:

<user-data name="john" age="25"></user-data>