Existem muitos artigos na internet que explicam bem o funcionamento dos EventEmitters em Angular, porém, tenho notado muito conteúdo no idioma inglês. Trata-se de um assunto simples, mas um pouco chato de aprender. De tanto que ralei, consegui entender como a banda toca e por isso vim aqui compartilhar com vocês.
Sem mais delongas, mãos a obra! — Eu mesmo.
Input Property
O conceito é muito simples, você usará esse cara quando quiser receber dados de um component pai.
Em nosso exemplo o component pai será o arquivo pai.component.ts.
Criando o component Pai
Em nosso component pai temos um objeto chamado família com um array de nomes.
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-pai', templateUrl: './pai.component.html', styleUrls: ['./pai.component.scss'] }) export class PaiComponent implements OnInit { familia: Object[]; constructor() { this.familia = [ { nome: 'Vitor', sobreNome: 'Borges' }, { nome: 'Emerson', sobreNome: 'Daniel' }, { nome: 'Thiago', sobreNome: 'Contre!' } ]; } ngOnInit() { console.log(this.familia); } }
Observe com ngOnInit() imprimimos o objeto família no console do navegador:
A ideia é simples: passar esse objeto família para um component filho — é ai que entra o Input Property.
Criando o component filho
Crie um component chamado filho.component.ts, e siga os passos:
- Importe o Input do pacote do angular/core
- Declare um input chamado recebeFamilia
Veja os passos implementados:
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-filho', templateUrl: './filho.component.html', styleUrls: ['./filho.component.scss'] }) export class FilhoComponent implements OnInit { @Input() recebeFamilia; constructor() { } ngOnInit() { console.log(this.recebeFamilia); } }
Agora que temos o pai, precisamos incluir o component filho no template (html) do component pai.
Vejamos como está ficando:
No print perceba que o console.log retorna vazio, isso porque criamos apenas uma propriedade imputável, mas não imputamos nada ainda.
Recebendo o objeto família do Pai via Input
Você precisa ir no pai onde declarou a tag de component do filho e seguir os passos:
- Utilize colchetes para passar o nome do seu Input;
- No valor do Input passe o objeto família do pai.
Vejamos agora o console do navegador:
Loop com o objeto recebido
Para criar o loop é muito simples, segue basicamente da mesma forma que você faria no component pai. Os dados já chegaram até a gente, e agora é só aproveitá-los.
<p> filho works! </p> <ul> <li *ngFor="let f of recebeFamilia"> {{f.nome}} {{f.sobreNome}} </li> </ul>
Resultado do loop:
Output emitindo eventos para o pai
A ordem de emissão de eventos do angular é a seguinte:
- Pai emite para o filho (input);
- Filho emite para o pai (output).
Sabendo disso, imagine o seguinte:
O pai esqueceu de adicionar a raphaella ao objeto família, logo ele já enviou pro filho esse objeto, podemos emitir um evento pro pai informando que recebemos o objeto e de quebra ainda podemos adicionar a raphaella ao objeto.
Emitindo o evento
Agora está na hora de responder pro pai, que recebemos o objeto.
- Importe o EventEmitter e o Output do pacote do angular/core;
- Declare uma propriedade chamada respostaFamilia com o output EventEmitter;
- Crie um método chamado feedback para emitir os dados de raphaella.
Veja o código implementado:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-filho', templateUrl: './filho.component.html', styleUrls: ['./filho.component.scss'] }) export class FilhoComponent implements OnInit { @Input() recebeFamilia; @Output() respostaFamilia = new EventEmitter(); constructor() { } ngOnInit() { console.log(this.recebeFamilia); console.log('Objeto familia recebido do component pai via Input: ', this.recebeFamilia); } feedback() { console.log('Resposta para o component pai', this.respostaFamilia.emit({"nome": "Raphella", "SobreNome": "Souza"})); } }
No .ts do component pai precisamos criar um método para receber a emissão do filho via parâmetro.
Segue o exemplo:
// função para receber emit Output do Filho reciverFeedback(respostaFilho) { console.log('Foi emitido o evento e chegou no pai >>>> ', respostaFilho); }
E agora passamos o método reciverFeedback como valor do Output.
<app-filho [recebeFamilia]="familia" (respostaFamilia)="reciverFeedback($event)"></app-filho>
Resultado final
Considerações
Neste artigo você viu como criar um objeto no component pai, e transferi-lo para um filho via Input, e quando o objeto foi recebido no filho, emitimos um evento (output) pro pai informando que recebemos o objeto, e de quebra, ainda passamos o nome que faltava no objeto para o pai tratar essa informação.
Para quem esta começando em Angular pode ser algo confuso, mas com muita prática logo se torna algo trivial.
Espero que tenham gostado. Qualquer dúvida fique a vontade pra chamar nos comentários.
Forte abraço!