Dynamic Component

1. Use Directive

   // create directive
   ng generate directive directives/DynamicChildLoader
   
   // Content in DynamicChildLoader
   
   import { Directive, ViewContainerRef } from '@angular/core';
       
   @Directive({
     selector: '[dynamicChildLoader]',
   })
   export class DynamicChildLoaderDirective {
     constructor(public viewContainerRef: ViewContainerRef) {}
   }

Usage in your ts file

@ViewChild(DynamicChildLoaderDirective, { static: true })
dynamicChild!: DynamicChildLoaderDirective;
    
ngOnInit(): void {
  this.loadDynamicComponent();
}
    
private loadDynamicComponent() {
  this.dynamicChild.viewContainerRef.createComponent(YourDynamicChildComponent);
}


// YourDynamicChildComponent has registed in moudle
@NgModule({
  declarations: [MyExampleComponent, DynamicChildLoaderDirective],
  imports: [CommonModule, ComponentsModule],
})