Komponen Anak di Angular

Seperti yang disebutkan di awal tutorial, di Angular, seluruh proyek dipecah menjadi komponen-komponen. Dalam pelajaran sebelumnya, kami bekerja hanya dengan komponen utama, yang dibuat secara default. Sekarang mari kita belajar membuat komponen anak.

Kode komponen baru secara otomatis digenerate oleh Angular menggunakan perintah terminal khusus: generate component. Setelah kata component, tuliskan nama komponen baru kita. Misalkan kita ingin mengenerate komponen user:

ng generate component user

Setelah perintah dijalankan, kita akan melihat bahwa kita memiliki folder baru app/user. Di dalamnya akan terdapat semua file standar komponen.

Di file komponen user.component.ts dekorator komponen akan secara otomatis dibuat:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Juga di file ini, kelas komponen akan secara otomatis dibuat:

export class UserComponent {

}

Sekarang komponen anak kita perlu dihubungkan ke komponen induk. Misalkan komponen induknya adalah komponen app, yang awalnya hadir saat instalasi framework. Impor komponen kita ke dalamnya:

import { UserComponent } from './user/user.component';

Dalam dekorator komponen, pada kunci imports sebutkan komponen yang kita impor:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // di sini
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Sekarang kita dapat menampilkan konten komponen anak di dalam komponen induk. Untuk ini, di file template induk, kita perlu menulis tag khusus, yang namanya ditentukan di properti selector dari dekorator @Component komponen anak. Dalam kasus kita, ini adalah tag app-user. Tuliskan di template induk:

beberapa teks
<app-user></app-user>

Generate komponen ProductComponent. Hubungkan komponen ini ke komponen utama proyek Anda.

Lakukan perubahan pada template komponen anak. Pastikan perubahan tersebut diterapkan di browser.

Ubah gaya CSS komponen anak. Pastikan perubahan tersebut diterapkan di browser.

Dalam komponen anak, buat properti name dan price. Tampilkan nilainya di template komponen anak.