Comunicação entre pai e filho com Property Binding @Input e @Output

O Property Binding junto com o decorator @Input e @Output nos dá o poder de passarmos os dados de um componente pai para um componente filho e do filho para o pai.

Por exemplo, vamos dizer que nosso componente root busca e processa dados de uma fonte externa.

Temos também um componente anexado ao root chamado “parente” (sendo assim ele é um filho de root).

Quer saber mais sobre o Angular? Acompanhe o Blog e o meu curso => Aqui

O “parente” é um componente responsável somente por mostrar em tela os dados passados pelo root.

Fazemos isso criando nosso próprio custom property bind.

  • Vamos abrir um terminal e digitar o comando: ng g c parente;
  • Agora vamos abrir o componente root e adicionar nosso componente parente.
  • Para manter as coisas simples, vamos criar dados “externos” que será um objeto dentro do componente root.

Vamos enviar esses dados para o filho ParenteComponent.

  • Para fazer o envio dos dados vamos usar o property binding no seletor “app-parente”.

Como o nosso seletor está dentro do componente root, vamos colocar nosso binding lá.

  • Em primeiro lugar devemos dar um nome para nosso property binding, que no caso será “paren” (que foi uma abreviação de parente).
  • E o valor que será passado será o objeto que criamos dentro do root component.

Ainda temos alguns passos para funcionar corretamente.

  • Quando recebemos dados de outros componentes, devemos usar o decorator @Input na classe que recebe os dados. Assim estamos dizendo ao Angular que estamos recebendo dados e qual propriedade estamos esperando.

Como é o nosso ParenteComponent que irá receber os dados, é nele que colocaremos o @Input.

Agora sim estamos prontos para mostrar os dados. E o nosso parente.component.html deve se parecer com isso:

Nós armazenamos o objeto parente na propriedade “paren” e assim conseguimos usar ele para exibir em tela.

Comunicação entre pai e filho com Property Binding @Input e @Output

No tópico anterior vimos como pegar os dados do pai e passar para o filho ( do app.component para o parente.component ), usando o custom Property Binding e com ajuda do decorator @Input.

Agora vamos aprender a fazer o reverso disso, do filho para o pai, usando o Event Binding e o decorator @Output.

No exemplo, vamos fazer o seguinte, será criado um botão que envia um evento do componente filho para o componente pai. Vamos usar os mesmos nomes do exemplo anterior.

No componente filho, vamos criar o button e adicionar um evento a ele. Vamos chamar de alertEvent().

Nosso método pode ter uma variável especial chamado de “$event” como argumento.

Essa variável é um objeto que pode segurar todos os dados sobre seja lá o que esse evento faça. E processaremos os dados no componente pai.

  • Segundo passo é criar esse evento que é um evento emitter que enviará os dados para o pai.

Algumas coisas sobre código acima:

  • Por estarmos mandando dados, usamos o @Output como diretiva.
  • Criamos o custom evento chamado onAlert.
  • Atribuímos um novo objeto new EventEmitter, para que possamos usar o .emit() e enviar o evento.
  • E não menos importante, importamos o Output e EventEmitter do Angular core.

Agora vamos criar o método alertEvent que usa o emitter para enviar dados.

Sobre o código:

  • No HTML, usamos o “$event” e assim precisamos de um parâmetro para trabalhar com ele. E demos o novo parâmetro de “e” e tipamos ele como object.
  • E então enviamos os dados com o .emit() que está disponível pelo EventEmitter.

As partes de enviar está pronta, falta receber.

Agora dentro do app.componente.html:

Sobre o código acima:

  • O onAlert que foi criado anteriormente invoca um método chamado alerta().

Agora é só manipular os dados do evento que recebemos na classe pai. No arquivo app.component.ts:

Sobre o código:

  • Como o método alerta() recebe $event como argumento, precisamos tratá-lo.
    • Criamos um parâmetro chamado “e” e tipamos ele como objeto.
  • Adicionamos um alert() comum para demonstrar como o pai recebe os dados.

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Fruto de mais de 7 anos estudando e trabalhando com Front-end, a "Jornada Front-end - O Guia Definitivo" é um manual completo para todos que querem subir em suas carreiras do zero ou subir do seu nível atual.

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Share This