Μετάδοση Δεδομένων στο Γονικό Component στο Angular

Μπορούν να μεταδοθούν δεδομένα από το θυγατρικό component στο γονικό. Αυτό γίνεται μέσω της εκπομπής γεγονότων χρησιμοποιώντας το ειδικό αντικείμενο EventEmitter και τη μέθοδο emit. Το θυγατρικό component θα εκπέμπει γεγονότα, μεταδίδοντας μαζί με το γεγονός κάποια δεδομένα, ενώ το γονικό component θα πιάνει τα γεγονότα, λαμβάνοντας τα δεδομένα από το θυγατρικό component.

Ας δοκιμάσουμε στην πράξη. Για αυτό πρέπει να ακολουθήσουμε μια σειρά βημάτων. Αρχικά στο θυγατρικό μας component εισάγουμε τον decorator @Output και την κλάση EventEmitter:

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

Τώρα στην θυγατρική κλάση δημιουργούμε μια ιδιότητα onData, της οποίας η τιμή θα είναι ένα νέο αντικείμενο EventEmitter, που περιέχει συμβολοσειρά:

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

Τώρα δημιουργούμε τη μέθοδο send, η κλήση της οποίας θα εκπέμπει το γεγονός onData στο γονικό component με το καθορισμένο κείμενο:

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

Στο template του θυγατρικού component δημιουργούμε ένα κουμπί, upon click στο οποίο θα καλείται η μέθοδος send:

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

Στο γονικό component δημιουργούμε τη μέθοδο onData, η οποία θα καλείται αυτόματα όταν από το θυγατρικό component εκπεμφθεί το αντίστοιχο γεγονός. Στην παράμετρο της μεθόδου θα φτάνουν τα μεταδιδόμενα δεδομένα:

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

Στο template του γονικού component δένουμε στην ετικέτα του θυγατρικού component το γεγονός:

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

Στο θυγατρικό component δημιουργήστε τρία κουμπιά, που εκπέμπουν διαφορετικά γεγονότα. Πιάνετε τα εκπεμπόμενα γεγονότα στο γονικό component.