Prosleđivanje podataka u roditeljski komponent u Angularu

Podaci se mogu proslediti iz podređenog komponenta u roditeljski. Ovo se postiže emitovanjem događaja pomoću specijalnog objekta EventEmitter i metode emit. Podređeni komponent će emitovati događaje, prosleđujući zajedno sa događajem određene podatke, a roditeljski komponent će hvatali događaje, dobijajući podatke iz podređenog komponenta.

Hajde da probamo u praksi. Za ovo nam je potrebno da odradimo niz koraka. Za početak u naš podređeni komponent importujemo dekorator @Output i klasu EventEmitter:

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

Sada u podređenoj klasi napravićemo svojstvo onData, čija će vrednost biti novi objekat EventEmitter, koji sadrži string:

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

Sada napravićemo metod send, čiji poziv će emitovati događaj onData u roditeljski komponent sa zadatim tekstom:

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

U templejtu podređenog komponenta napravićemo dugme, na čiji klik će se pozivati metod send:

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

U roditeljskom komponentu napravićemo metod onData, koji će se automatski pozivati kada iz podređenog komponenta bude emitovan odgovarajući događaj. U parametar metoda će upasti prosleđeni podaci:

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

U templejtu roditeljskog komponenta povezaćemo na tag podređenog komponenta događaj:

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

U podređenom komponentu napravite tri dugmeta, koja emituju različite događaje. Uhvatite emitovane događaje u roditeljskom komponentu.