Solucionado
Na aula nós aprendemos a fazer a transferência de dados do componente-pai para o componente-filho, usando o @Input no TS do componente filho, e a sintaxe [filho]="pai", porém, dá pra fazer o fluxo oposto? por exemplo, se eu tiver dados de um componente filho, e quiser passa-los ao componente pai, como eu faria?
Olá, Kaiky!
Sua pergunta é muito relevante e a resposta é sim, você pode fazer o fluxo oposto, ou seja, passar dados do componente filho para o componente pai no Angular. Para isso, você pode usar o @Output e EventEmitter.
O @Output é um decorador que marca uma propriedade como uma saída de destino para eventos de vinculação de dados. A propriedade de saída é sempre uma instância de EventEmitter e os eventos devem ser emitidos através do método emit().
Aqui está um exemplo de como você pode fazer isso:
No componente filho, você teria algo assim:
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-filho',
template: `
<button (click)="enviarEvento()">Enviar Evento</button>
`,
styleUrls: ['./filho.component.css']
})
export class FilhoComponent {
@Output() eventoDoFilho = new EventEmitter();
enviarEvento() {
this.eventoDoFilho.emit('Este é o meu evento!');
}
}
E no componente pai, você receberia o evento assim:
import { Component } from '@angular/core';
@Component({
selector: 'app-pai',
template: `
<app-filho (eventoDoFilho)="receberEvento($event)"></app-filho>
`,
styleUrls: ['./pai.component.css']
})
export class PaiComponent {
receberEvento(eventoFilho) {
console.log(eventoFilho);
}
}
Neste exemplo, quando o botão no componente filho é clicado, o método enviarEvento() é chamado, que por sua vez emite um evento com a string 'Este é o meu evento!'. O componente pai está ouvindo este evento e quando ele é disparado, o método receberEvento() é chamado e a string é registrada no console.
Confira essa aula do curso "Angular: Ciclo de vida, do instrutor Diego, nela você verá a demonstração do uso do @Output.
Espero ter ajudado e bons estudos!