Desenvolvimento

4 abr, 2018

Angular 5 EventEmitter aprendendo a usar Input e OutPut property

Publicidade

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:

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

  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 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.

  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 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!