Existem muitos tutoriais 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.
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 implementado:
Agora que temos o pai, precisamos incluir o component filho no template (html) do component pai.
vejamos como esta 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 siga 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 ate agente, agora, e só aproveita-los.
Resultado do loop:
Output Emitindo eventos para o Pai
A ordem de emissão de eventos os 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 raphaellaao 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 esta 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 da raphaella.
Veja o código implementado
No .ts do component pai precisamos criar um método para receber a emissõ do filho via parâmetro.
segue exemplo:
E agora passamos o método reciverFeedback como valor do Output.
resultado final
Considerações
Neste post 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!
