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

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

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

`import { Component, Output, EventEmitter } from '@angular/core';`

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

`export class UserComponent { @Output() public onData = new EventEmitter<string>(); }`

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

`export class UserComponent { @Output() public onData = new EventEmitter<string>(); send() { this.onData.emit('xxx'); } }`

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

`<button (click)="send()"> send data </button>`

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

`export class AppComponent { public onData(data: string) { console.log(data); } }`

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

`<app-user (onData)="onData($event)"></app-user>`

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

← →
↑