มาดูตัวอย่างโค้ดการสร้าง dynamic component ใน angular กันครับ

ในการสร้าง dynamic component ในตัวอย่างนี้ ผมจะใช้ ComponentFactoryResolver กับ ViewContainerRef ไปดูตัวอย่างกันเลย

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ng-template #container></ng-template>
  `
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  createComponent(component: any) {
    const factory = this.componentFactoryResolver.resolveComponentFactory(component);
    const componentRef = this.container.createComponent(factory);
  }
}

ในตัวอย่างเรามีฟังก์ชัน createComponent ที่รับ component เป็น parameter จากนั้นเราจะใช้ ComponentFactoryResolver สำหรับสร้าง factory สำหรับ component

factory จะใช้สร้าง instance ของ component ซึ่งจะเพิ่มเข้าสู่ view โดยใช้ ViewContainerRef

ViewChild จะ reference โดยใช้ ViewContainerRef

เราสามารถเรียก createComponent ได้ดังตัวอย่าง

<button (click)="createComponent(ChildComponent)">Create Child Component</button>
<ng-template #container></ng-template>

จากโค้ดเวลาเรากดปุ่ม มันจะไปสร้าง component ขึ้นมา