Transmiterea datelor către componenta părinte în Angular

Este posibil să transmiți date dintr-o componentă copil către componenta părinte. Acest lucru se face prin emiterea de evenimente cu ajutorul unui obiect special EventEmitter și a metodei emit. Componenta copil va emite evenimente, transmitând împreună cu evenimentul unele date, iar componenta părinte va prinde evenimentele, obținând datele din componenta copil.

Să încercăm în practică. Pentru aceasta trebuie să parcurgem o serie de pași. Pentru început în componenta noastră copil importăm decoratorul @Output și clasa EventEmitter:

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

Acum în clasa copil vom crea o proprietate onData, a cărei valoare va fi un nou obiect EventEmitter, care conține un șir de caractere:

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

Acum vom crea o metodă send, apelul căreia va emite un eveniment onData către componenta părinte cu textul dat:

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

În șablonul componentei copil vom crea un buton, la click pe care se va apela metoda send:

<button (click)="send()">
	trimite date
</button>

În componenta părinte vom crea o metodă onData, care va fi apelată automat atunci când din componenta copil este emis evenimentul corespunzător. În parametrul metodei vor intra datele transmise:

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

În șablonul componentei părinte vom lega de tag-ul componentei copil evenimentul:

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

În componenta copil creați trei butoane, care emit evenimente diferite. Prindeți evenimentele emise în componenta părinte.