Transmitindo dados para o componente pai no Angular

É possível transmitir dados de um componente filho para um componente pai. Isso é feito emitindo eventos usando um objeto especial EventEmitter e o método emit. O componente filho emitirá eventos, passando alguns dados junto com o evento, e o componente pai irá capturar os eventos, obtendo os dados do componente filho.

Vamos tentar na prática. Para isso, precisamos realizar uma série de etapas. Primeiro, em nosso componente filho, importamos o decorador @Output e a classe EventEmitter:

app/user/user.component.tsimport { Component, Output, EventEmitter } from '@angular/core';

Agora, na classe filha, vamos criar uma propriedade onData, cujo valor será um novo objeto EventEmitter, contendo uma string:

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
}

Agora, vamos criar um método send, cuja chamada irá emitir o evento onData para o componente pai com o texto especificado:

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
  
  send() {
    this.onData.emit('xxx');
  }
}

No template do componente filho, vamos criar um botão, cujo clique irá chamar o método send:

app/user/user.component.html<button (click)="send()">
  enviar dados
</button>

No componente pai, vamos criar um método onData, que será automaticamente chamado quando o evento correspondente for emitido pelo componente filho. Os dados transmitidos serão passados para o parâmetro do método:

app/app.component.tsexport class AppComponent {
  public onData(data: string) {
    console.log(data);
  }
}

No template do componente pai, vamos vincular ao tag do componente filho o evento:

app/app.component.html<app-user (onData)="onData($event)"></app-user>