Transfer Data ke Komponen Anak di Angular

Data dapat ditransfer dari komponen induk ke komponen anak. Data ini akan masuk ke dalam properti kelas anak. Mari kita lihat bagaimana cara melakukannya.

Pertama, buatlah properti di dalam kelas komponen anak, ke mana data akan diimpor dari komponen induk:

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

Sekarang kita perlu mendeklarasikan bahwa properti-properti ini akan menerima data dari luar. Untuk hal ini, digunakan dekorator khusus Input. Impor ke dalam komponen anak kita:

import { Input } from '@angular/core';

Dan sekarang terapkan dekorator ini untuk properti-properti kita:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

Tambahkan output data ke dalam file template komponen anak:

<p>{{ name }}</p>
<p>{{ age }}</p>

Dan sekarang dalam template induk, saat memanggil tag komponen anak, tulis atribut-atribut, yang namanya akan sesuai dengan nama properti kelas anak kita. Nilai atribut-atribut ini akan masuk ke dalam properti kelas anak:

<user-data name="john" age="25"></user-data>