Динамические компоненты в Angular

ComponentFactoryResolver в Angular позволяет создавать и управлять динамическими компонентами, которые создаются и уничтожаются в ходе работы приложения.

Сначала создаем динамический компонент, а затем основной компонент с ComponentFactoryResolver:

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-root',
  template: `<div #container></div>
             <button (click)="loadComponent()">Load Component</button>`,
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    this.container.clear();
    this.container.createComponent(componentFactory);
  }
}

👉 @sWebDev