Передача данных в родительский компонент в Angular

Можно передавать данные из дочернего компонента в родительский. Это делается путем испускания событий с помощью специального объекта EventEmitter и метода emit. Дочерний компонент будет испускать события, передавая вместе с событием некоторые данные, а родительский компонент будет ловить события, получая данные из родительского компонента.

Давайте попробуем на практике. Для этого нам нужно проделать ряд шагов. Для начала в наш дочерний компонент импортируем декоратор @Output и класс EventEmitter:

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

Теперь в дочернем классе сделаем свойство onData, значением которого будет новый объект EventEmitter, содержащий строку:

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

Теперь сделаем метод send, вызов которого будет испускать событие onData в родительский компонент с заданным текстом:

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

В темплейте дочернего компонента сделаем кнопку, по клику на которую будет вызываться метод send:

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

В родительском компоненте сделаем метод onData, который будет автоматически вызываться, когда из дочернего компонента будет испущено соответствующее событие. В параметр метода будут попадать переданные данные:

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

В темплейте родительского компонента привяжем к тегу дочернего компонента событие:

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