Komponen dinamis

Dalam pelajaran ini, Anda akan mempelajari cara memuat komponen secara dinamis di Angular untuk membuat aplikasi yang fleksibel.

Apa itu komponen dinamis?

Komponen dinamis dimuat ke dalam tampilan saat waktu berjalan, bukan dideklarasikan langsung di dalam templat.

Mengapa menggunakan komponen dinamis?

• Penyajian antarmuka yang fleksibel
• Menampilkan komponen berdasarkan kondisi
• Membangun dasbor atau jendela modal dinamis

Membuat tempat penampung

Gunakan <ng-container> sebagai tempat penampung untuk memuat komponen dinamis:

<ng-container #dynamicContainer></ng-container>

Menggunakan ViewChild

Akses kontainer menggunakan @ViewChild di kelas komponen Anda:

@ViewChild('dynamicContainer', { read: ViewContainerRef }) container;

Memuat komponen secara dinamis

Gunakan penyelesai pabrik komponen untuk membuat dan menyisipkan komponen:

const componentRef = this.container.createComponent(MyDynamicComponent);

Meneruskan data ke komponen dinamis

Teruskan data ke komponen yang dibuat secara dinamis menggunakan masukan:

componentRef.instance.data = 'Hello Dynamic';

Menghapus komponen dinamis

Anda dapat dengan mudah menghapus komponen dinamis dari DOM:

this.container.clear();

Ringkasan

Sekarang Anda mengetahui cara membuat, mengelola, dan menghapus komponen secara dinamis di Angular. Kerja yang luar biasa!