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:

  1. Importe o Input do pacote do angular/core;
  2. 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:

  1. Utilize colchetes para passar o nome do seu Input;
  2. 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.

  1. Importe o EventEmitter e o Output do pacote do angular/core;
  2. Declare uma propriedade chamada respostaFamilia com o output EventEmitter;
  3. 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!