Dynamically loading data in to table with different numbers of columns and different types in Angular

Question

I have some data that have properties id, parentId, value, decription, dateBegin, flags(int). So i need to display this data in table. And depending on which parent, in table must be displayed different numbers of columns with different types. Also for different parent child have different bits that i get from property flags. Now i have columnsDefinition property in component:

columnsDefinition = [ 
  { key: 'value', title: 'Value', type: 'string', isSortable: true, bits: 0},
  { key: 'description', title: 'Description', type: 'string', isSortable: false, bits: 0},
  { key: 'flags', title: 'Active', type: 'boolean', isSortable: false, bits: 0},
  { key: 'flags', title: 'Only user', type: 'boolean', isSortable: true, bits: 1} ]

And table in html component looks like:

<nz-table>
...
<thead>
  <tr>
    <th *ngFor="let item of columnsDefinition">{{item.title}}</th>
  </tr>
</thead>
<tbody>
  <ng-container *ngFor="let item of resultsTable.data">
    <tr>
      ???
    </tr>
  </ng-container>
</tbody>
</nz-table>

So, how can i iterate rows in tbody for define columns depending on it's type. (nz-date-picker for date / nz-checkbox for boolean)

Answer 1

Your tbody should be:

<tbody>
    <tr *ngFor="let item of resultsTable.data">
      <ng-container *ngFor="let col of columnsDefinition">
        <td *ngIf="col.type === 'string'">
          <input nz-input [placeholder]="col.title" [(ngModel)]="item[col.key]" />
        </td>
        <td *ngIf="col.type === 'boolean'">
          <label nz-checkbox [(ngModel)]="item[col.key]"></label>
        </td>
        <td *ngIf="col.type === 'date'">
          <nz-date-picker [(ngModel)]="item[col.key]"></nz-date-picker>
        </td>
      </ng-container>
    </tr>
  </tbody>

Demo at StackBlitz.

Result: