Load multiple components inside ngfor on click of button

Question

I am creating a project with Angular-Material. I want to integrate accordion panels in my project. I have facing a problem while loading dynamic component inside expansion panel. I want to load dynamic different type of components inside expansion panel basis on conditions. Here is code:

import {Component, NgModule, QueryList,ViewChildren, ComponentFactoryResolver, ViewContainerRef, TemplateRef, ViewEncapsulation}
from '@angular/core'
import { TcpModuleComponent } from './tcp-module/tcp-module.component'
import { UdpComponent } from './udp/udp.component'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ref:any;
  viewContainerRef = [];
  @ViewChildren('target', {read: ViewContainerRef}) container: QueryList<ViewContainerRef>

  constructor(private resolver: ComponentFactoryResolver) {}

  category = [{
    "type":"TCP&UDP Port",
    "code":"port",
    "locked":false
  },
  {
    "type":"DHCP",
    "code":"dhcp",
    "locked":true
  },
  {
    "type":"ALG",
    "code":"alg"
  },
  {
    "type":"Tracert",
    "code":"tracert"
  },
  {
    "type":"Bandwidth",
    "code":"bandwidth"
  },
];
  panelOpenState: boolean = false;
  allExpandState = false;
  ngOnInit() {
    console.log(this.category)
  }
  loadComponent(type,item,comp){
    if(item.locked == true){
      type._toggle();
      return
    }

    let componentRef;
    let componentFactory;


    if(item.code == "port"){
      this.container.toArray().map((viewContainerRef, i) => {
        componentFactory = this.resolver.resolveComponentFactory(TcpModuleComponent);  
        componentRef = viewContainerRef.createComponent(componentFactory);
        this.ref = componentRef;
      // this.viewContainerRef.push(viewContainerRef)
        return
      });
    }
    if(item.code == "dhcp"){
      this.container.toArray().map((viewContainerRef, i) => {
      componentFactory = this.resolver.resolveComponentFactory(UdpComponent);  
      componentRef = viewContainerRef.createComponent(componentFactory);
      this.ref = componentRef
      return
    });
  }


  }
}

Html part

<mat-accordion >
<mat-expansion-panel *ngFor="let data of category" (click)="loadComponent(panelH,data)">
  <mat-expansion-panel-header #panelH >
    <mat-panel-title>
    <span class="title">{{data.type}}</span>
      </mat-panel-title>
  </mat-expansion-panel-header>
  <div *ngIf="data.code == 'port'">
    <ng-container #target></ng-container>
  </div>
</mat-expansion-panel>
</mat-accordion >

I am not getting the proper ide ahow to acheive this.

Answer 1

Instead of adding ng-container you can directly add component tag to html.

<mat-accordion >
<mat-expansion-panel *ngFor="let data of category" (click)="loadComponent(panelH,data)">
  <mat-expansion-panel-header #panelH >
    <mat-panel-title>
    <span class="title">{{data.type}}</span>
      </mat-panel-title>
  </mat-expansion-panel-header>
  <TcpModuleComponent *ngIf="data.code === 'port'"></TcpModuleComponent>
  <UdpComponent*ngIf="data.code === 'dhcp'"></UdpComponent>
</mat-expansion-panel>
</mat-accordion >

Answer 2

Do you try to manage this with Angular directives? Angular Directives

And I think for your sample you dont need a click event like 'LoadComponent'. Take a look at following sample:

import {Component, NgModule, QueryList,ViewChildren, ComponentFactoryResolver, ViewContainerRef, TemplateRef, ViewEncapsulation}
from '@angular/core'
import { TcpModuleComponent } from './tcp-module/tcp-module.component'
import { UdpComponent } from './udp/udp.component'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ref:any;
  viewContainerRef = [];
  @ViewChildren('target', {read: ViewContainerRef}) container: QueryList<ViewContainerRef>

  constructor(private resolver: ComponentFactoryResolver) {}

  category = [
    { "type": "TCP&UDP Port", "code": "port", "locked": false },
    { "type": "DHCP", "code": "dhcp", "locked": true },
    { "type": "ALG", "code": "alg" },
    { "type": "Tracert", "code": "tracert" },
    { "type": "Bandwidth", "code": "bandwidth" },
  ];
  panelOpenState: boolean = false;
  allExpandState = false;
  ngOnInit() {
    console.log(this.category)
  }   


  }
}

<div class="row">
      <div class="col-md-12 mt-5 ml-5">
        <mat-accordion>
          <mat-expansion-panel *ngFor="let data of category">
            <mat-expansion-panel-header>
              <mat-panel-title>
                <span class="title">{{data.type}}</span>
              </mat-panel-title>
            </mat-expansion-panel-header>
            <span [ngSwitch]="data.code">
              <div *ngSwitchCase="'port'">
                TcpModuleComponent will insert here
              </div>
              <div *ngSwitchCase="'dhcp'">
                 UdpComponent will insert here
              </div>
              <div *ngSwitchDefault>
                 Default component will insert here 
              </div>
            </span>
         </mat-expansion-panel>
      </mat-accordion>
   </div>
</div>