Load component dynamically in Angular [duplicate]

Question

I receive all components to show at a particular time so I'm iterating it. I have tried it like shown below.I already have Component created just which Component are allowed to use is from server

      <ngb-tabset [activeId]="1">
        <ngb-tab id="{{i+1}}" title="{{dir.Name}}" *ngFor="let dir of DefaultDirectives;let i=index">
          <ng-template ngbTabContent>
            //Custom Component According to name of directive name in iteration
          </ng-template>
        </ngb-tab>
      </ngb-tabset>

I have for example this :

 DefaultDirectives:any[]=[
         {Name:'First Directive',Directive:'app-dir1'},
         {Name:'Third Directive',Directive:'app-dir3'},
       ]

I have all these components

@Component({
  selector: 'app-dir1',
  templateUrl: './dir1.component.html', 
})
export class Dir1Component  {
//Some Code
}



@Component({
  selector: 'app-dir2',
  templateUrl: './dir2.component.html', 
})
export class Dir2Component  {
//Some Code
}



@Component({
  selector: 'app-dir3',
  templateUrl: './dir3.component.html', 
})
export class Dir3Component {
    //Some Code
}

Answer 1

Based on what is explained in https://angular.io/guide/dynamic-component-loader, I once wrote a DynamicHost directive helper (in Angular 6 project)

@Directive({
    selector: '[smaDynamicHost]',
})
export class DynamicHostDirective implements OnInit {
    @Input('smaDynamicHost') component: Type<any>;

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private viewContainerRef: ViewContainerRef,
        private cdr: ChangeDetectorRef,
    ) {}

    ngOnInit(): void {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
            this.component,
        );
        this.viewContainerRef.clear();
        this.viewContainerRef.createComponent(componentFactory);
        this.cdr.detectChanges();
    }
}

With that directive, you can now simply pass the type of component you want to load dynamically. With your example, it should looks like

<ng-template ngbTabContent [smaDynamicHost]="dir.Directive"></template>

 DefaultDirectives:any[]=[
    {Name: 'First Directive', Directive: Dir1Component},
    {Name: 'Third Directive', Directive: Dir3Component},
]

Important: you must declare your dynamic components as entryComponents in your angular module

I hope it helps