dynamic-app-component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'dynamic-comp-app';
  frameworks: FrameworkItem[];
  @ViewChild(FrameworkDirective, { static: true }) frameworkHost: FrameworkDirective;
  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
  ngOnInit(): void {
    this.frameworks = this.getFrameworkList();
    this.loadDynamicComponentsWithIndex(0);
  }
  loadDynamicComponentsWithIndex(ind: any) {
    const frameworkItem = this.frameworks[ind];
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(frameworkItem.component);
    const viewContainerRef = this.frameworkHost.viewContainerRef;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent(componentFactory);
    (<FrameworkComponent>componentRef.instance).data = frameworkItem.data;
  }
  getFrameworkList() {
    return [
      new FrameworkItem(AngularComponent, { name: 'Angular' }),
      new FrameworkItem(VueComponent, { name: 'VueJS' }),
      new FrameworkItem(ReactComponent, { name: 'ReactJS' })
    ];
  }
}