Load component dynamically in Angular

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
}

You should learn the difference between a component and a directive. https://angular.io/api/core/Directive — Reactgular, Dec 27 '19 at 11:42
What can I do to make it like this to call as component I can do but I Selector is dynamic @Reactgular — Mustafa Kunwa, Dec 27 '19 at 11:44
There are a lot of different ways to do what you want here. Ranging from a switch to dynamic components. It looks like you want dynamic, but a `ngSwitch` is easiest (why complicate things?). Anyway, read this: https://angular.io/guide/dynamic-component-loader — Reactgular, Dec 27 '19 at 11:45
because there are 20-30 different Template which I have to use usually 3-5 will be there — Mustafa Kunwa, Dec 27 '19 at 11:46
I've given you lots of links here. Start reading and then go try something. I don't think this needs to be answered. Asked to many times here. — Reactgular, Dec 27 '19 at 12:18

Sergio Mazzoleni · Answer 1 · 2019-12-27T14:19:46.793

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

Load component dynamically in Angular

1 Answers1