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.

<h1>Componente principal</h1>
<hr>
<app-parente></app-parente>

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public parente = {
    name: 'Dener Troquatte',
    age: 31,
    department: 'Desenvolvimento'
  }
}

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.

<h1> Componente principal </h1>
<hr>
<app-parente [paren]="parente"></app-parente>

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.

import { Component, OnInit, Input } from '@angular/core';
 
@Component({
  selector: 'app-parente,
  templateUrl: './parente.component.html',
  styleUrls: ['./parente.component.css']
})
export class ParenteComponent implements OnInit {
  @Input() public paren:any;
 
  constructor() { }

  ngOnInit(): void { }
}

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

<h3>Nossos parentes</h3>
 
<p>
  Name: {{ paren.name }}<br>
  Age: {{ paren.age }}<br>
  Department: {{ paren.department }}
</p>

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

<h3>Filho</h3>
<button (click)="alertEvent($event)">Click para evento</button>

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.

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 
@Component({
  selector: 'app-parente,
  templateUrl: './parente.component.html',
  styleUrls: ['./parente.component.css']
})
export class ParenteComponent implements OnInit {
  @Output() public onAlert = new EventEmitter();
 
  constructor() { }
 
  ngOnInit(): void { }
}

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.

...
export class ParenteComponent implements OnInit {
  @Output() onAlert = new EventEmitter();

  public alertEvent(e: object) {
    this.onAlert.emit(e);
  }

  constructor() { }

  ngOnInit(): void { }
}

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:

<h1>Pai</h1>
<hr>
<app-parente (onAlert)="alerta($event)"></app-parente>

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:

import { Component } from '@angular/core';
import { Alert } from 'selenium-webdriver';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public alerta(e:object) {
    alert('Alerta: ' + e);
    console.log(e);
  }
}

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.