Passagem de dados de Componente Pai para Filho (@Input)
Como funciona: Envia-se dados do componente pai para
o filho utilizando o decorador
@Input() no filho.
Exemplo 1:
<!-- Componente Pai (app.component.html) -->
<app-filho [nome]="nomeUsuario"></app-filho>
<!-- app.component.ts -->
nomeUsuario = 'Fabio';
<!-- filho.component.ts -->
@Input() nome: string;
Exemplo 2:
<app-produto [preco]="199.99" [descricao]="'Teclado Mecânico'"></app-produto>
@Input() preco: number;
@Input() descricao: string;
Exemplo 3:
<app-perfil [usuario]="usuario"></app-perfil>
usuario = { nome: 'Joana', idade: 30 };
@Input() usuario: { nome: string; idade: number };
Passagem de dados de Filho para Pai (@Output
e EventEmitter)
Como funciona: Usa-se
@Output() e
EventEmitter para emitir
eventos do componente filho que são ouvidos pelo pai.
Exemplo 1:
@Output() clicado = new EventEmitter<string>();
enviarMensagem() {
this.clicado.emit('Olá do filho!');
}
<app-filho (clicado)="responder($event)"></app-filho>
responder(mensagem: string) {
console.log(mensagem);
}
Exemplo 2:
@Output() produtoAdicionado = new EventEmitter<{ nome: string; preco: number }>();
<button (click)="produtoAdicionado.emit({ nome: 'Mouse', preco: 99 })">Adicionar</button>
<app-produto (produtoAdicionado)="adicionarProduto($event)"></app-produto>
Exemplo 3:
@Output() formEnviado = new EventEmitter<any>();
<form (submit)="formEnviado.emit(formulario.value)" #formulario="ngForm">
...
</form>