Trafegando dados entre componentes com EventEmitter (@Output)
Tags: angular, beginners
Published: 2020-02-12 19:37:50

Para quem está começando a utilizar o framework Angular, eu irei apresentar algo que será utilizado com frequência, então, é importante que saiba muito bem como e quando utilizar. Vou mostrar o funcionamento do decorador @Output.

<h2>Para que serve?</h2>
A arquitetura do angular nos permite criar diversos componentes, o que é muito bom, visto que a reutilização de código fica mais fácil. Mas, também existem dificuldades com essa arquitetura, uma delas é que os componentes podem ser utilizados dentro de outros componentes. Com isso, surge um problema que é, a necessidade de troca de informações entre o componente filho e o componente pai. Para isso, utilizamos o @Output. O @Output é responsável por facilitar a comunicação de filho para o pai. O nome @Output passa a ideia de saída de um valor, que é o que acontece na visão do componente filho.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nokoqgoykw4uu8h4715b.PNG)

<h2>Exemplo prático</h2>
Vamos criar um programa que irá listar o nome de personagens. Os personagens serão inseridos no componente filho e exibido no componente pai. Vamos começar implementando o componente filho. Nele criaremos a variável <strong>novoPersonagem</strong> que será decorado pelo @Output.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kjnhnr3hfevk80po96h4.PNG)

Perceba que, a variável novo personagem recebe o <strong>new EventEmitter<string></strong> que faz parte do @angular/core. O EventEmitter permite ao componente filho gerar um evento para o componente pai, que será utilizado quando existir a necessidade de enviar algo. Além disso, na imagem podemos ver o método <strong>enviarParaPai</strong> que recebe uma string. Esse método utiliza o <strong>emit</strong> para emitir ao componente pai que queremos enviar algo, que nesse caso é a variável <strong>value</strong>.

Para chamar o nosso método <strong>enviarParaPai</strong> e assim  disparar o evento de emitir, vamos implementar o html do filho.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h2v2colbbcomssse6kdc.PNG)

O html possui um input para que o usuário escreva o nome dos personagens, e um button que chama o método <strong>enviarParaPai</strong> passando o que está escrito no input. O próximo passo é no pai.

Começamos pelo html, que possui também um ngFor para exibir todos os personagens adicionados. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lh5jzdpy4dc7wp99z6iq.PNG)

Perceba que no componente filho decoramos a variável <strong>novoPersonagem</strong> e emitimos a inserção de um novo personagem. No html do componente pai, ele aparece novamente pois recebeu o decorador @Output o que lhe permite comunicar com o componente pai. Ao emitir um valor será chamado o método <strong>addPersonagem</strong> passando o item transmitido pelo emit que foi enviado pelo filho.

Para finalizar, vamos implementar o typeScript do componente pai, que deve conter a variável que irá guardar o nome dos personagens, e o método <strong>addPersonagem</strong> que irá adicionar o novo personagem emitido.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kukmp22s4ubjpano18ux.PNG)
 
  
Espero que esse texto tenha ajudado a você que está começando!