동적으로 컴포넌트 불러오기

angular 13 이상 버전에서는 ComponentFactoryResolver 없이 바로 ViewContainerRef.createComponent 를 사용하여 동적으로 컴포넌트를 불러올 수 있다.

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

import { Component1 } from './component1';
import { Component2 } from './component2';


export class DynamicComponent implements ... {
  constructor(
     private viewContainerRef: ViewContainerRef
  ) {
  }
  public ngAfterViewInit(): void {
    this.create();
  }

  public create(): void {
    switch (this.data.title) {
      case 'Component1':
        const component = this.viewContainerRef.createComponent(Component1);
        break;
      case 'Component2':
        const component = this.viewContainerRef.createComponent(Component2);
        break;
     
    }
  }
}

위의 코드에서 보듯 이전 버전보다는 매우 간단한 사용법을 자랑한다.
다음 예는 동적 컴포넌트를 불러와서 그 컴포넌트에 값을 전달하는 예제이다.