Как передать данные из дочернего компонента в родительский

Передача данных с помощью @ViewChild

@ViewChild дает родительскому компоненту доступ к атрибутам и функциям дочернего компонента. Есть один недостаток: дочерний компонент не будет доступен пока view не будет инициализирован. Это значит, что для получения данных из дочернего компонента нужно реализовать AfterViewInit.

parent.component.ts

child.component.ts

Передача данных с помощью Output() and EventEmitter

В этом случае мы эмитим данные из дочернего компонента. Способ идеально подходит для обработки кликов, ввода в поля форм и других событий пользователя.

В родительском компоненте мы создаем функцию, которая будет обрабатывать полученные из дочернего компонента данные. В шаблоне присваиваем эту функцию тому сообщению, которое эмитится из дочернего компонента (<app-child (messageEvent)="receiveMessage($event)"></app-child>).

В дочернем компоненте с помощью декоратора @Output мы объявляем событие, которое будет эмитится. Далее создаем функцию, которая будет вызывать эмит этого события. В шаблоне создаем кнопку, при клике на которую будет вызываться функция.

parent.component.ts

child.component.ts

Передавать данные между компонентами можно через сервис. При этом компоненты могут быть никак не связаны между собой.