Loading an array of components dynamically on click

Question

I'm having trouble loading in components dynamically.

I implemented angular's dynamic component loader the same way as desired in their docs: https://angular.io/guide/dynamic-component-loader

What I want to do is have an ng for loop for each dynamic component

<ng-container *ngFor="let rowData of TableData">
  <tbody [attr.data-index]="rowIndex">
    <tr click="loadComponentForIndex()">Some Data</tr>
    <ng-container *ngIf="isRowShown(rowIndex)">
      <ng-template dynamicallyLoadedComponent></ng-template>
    <ng-container>
  </tbody>
</ng-container>

The issue is that when I click on any of the table rows, only the first component is instantiated.

Current Result:

Some Data
dynamicallyLoadedComponent
Some Data
Some Data
Some Data
Some Data

Desired Result:On click of the 2nd and 6th row:

Some Data
Some Data
dynamicallyLoadedComponent
Some Data
Some Data
Some Data
Some Data
dynamicallyLoadedComponent
Some Data
Some Data
Some Data
Some Data

score -1 · Answer 1 · answered Jul 21 '18 at 08:21

Try this , this works fine for me.

  <tbody *ngFor="let rowData of TableData;let i=index">
    <tr (click)="hideme[i] = !hideme[i]">Some Data</tr>
    <tr [hidden]="hideme[i]">{{getContent()}}</tr>
  </tbody>

and declare hideme in .ts as,

hideme = {};

//your dynamic data
  getContent(){
    return " Dynamic child data";
  }

check this link

Loading an array of components dynamically on click

1 Answers1