Transfer Data ke Komponen Induk di Angular

Data dapat ditransfer dari komponen anak ke komponen induk. Hal ini dilakukan dengan memancarkan event menggunakan objek khusus EventEmitter dan metode emit. Komponen anak akan memancarkan event, mentransfer beberapa data bersama dengan event tersebut, sedangkan komponen induk akan menangkap event, mendapatkan data dari komponen induk.

Mari kita coba dalam praktik. Untuk ini kita perlu melakukan serangkaian langkah. Pertama-tama, ke dalam komponen anak kita, impor decorator @Output dan kelas EventEmitter:

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

Sekarang dalam kelas anak buat properti onData, yang nilainya akan menjadi objek baru EventEmitter, yang mengandung string:

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

Sekarang buat metode send, pemanggilan yang akan memancarkan event onData ke komponen induk dengan teks yang ditentukan:

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

Dalam template komponen anak, buat tombol, yang ketika diklik akan memanggil metode send:

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

Dalam komponen induk, buat metode onData, yang akan secara otomatis dipanggil, ketika dari komponen anak event yang sesuai dipancarkan. Ke dalam parameter metode akan masuk data yang ditransfer:

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

Dalam template komponen induk, ikat ke tag komponen anak event:

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

Dalam komponen anak, buat tiga tombol, yang memancarkan berbagai event. Tangkaplah event yang dipancarkan dalam komponen induk.