Transmetimi e të dhënave në komponentin prind në Angular

Është e mundur të transmetohen të dhëna nga komponenti fëmijë në komponentin prind. Kjo bëhet duke emetuar ngjarje me ndihmën e objektit special EventEmitter dhe metodës emit. Komponenti fëmijë do të emetojë ngjarje, duke transmetuar së bashku me ngjarjen disa të dhëna, ndërsa komponenti prind do të kapë këto ngjarje, duke marrë të dhënat nga komponenti fëmijë.

Le ta provojmë në praktikë. Për këtë na duhet të ndërmarrim një sërë hapash. Fillimisht në komponentin tonë fëmijë duhet të importojmë dekoratorin @Output dhe klasën EventEmitter:

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

Tani në klasën fëmijë le të krijojmë një property onData, vlera e së cilës do të jetë një objekt i ri EventEmitter, që përmban një string:

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

Tani le të krijojmë një metodë send, thirrja e së cilës do të emetojë ngjarjen onData në komponentin prind me tekstin e caktuar:

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

Në template-in e komponentit fëmijë le të krijojmë një buton, upon click of which do të thirret metoda send:

<button (click)="send()">
	dërgo të dhënat
</button>

Në komponentin prind le të krijojmë një metodë onData, e cila do të thirret automatikisht kur nga komponenti fëmijë të emetohet ngjarja përkatëse. Në parametrin e metodës do të kalojnë të dhënat e transmetuara:

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

Në template-in e komponentit prind le të lidhim ngjarjen në tag-un e komponentit fëmijë:

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

Në komponentin fëmijë krijoni tre butona, që emetojnë ngjarje të ndryshme. Kapni ngjarjet e emetuara në komponentin prind.