Angular - print additional TDs inside a component table, based on header

Question

i'm trying to build a semi-automatic table with angular 10: i can give to it an object of data, an array of strings with the columns and i would like to include some html inside the tag.

The array of strings may include values that are not keys of the data, but instead they can refer to a piece of html that i wrote between the ed-table tags.

Usage of table:

<ed-table [sourceData]="table" [columns]="tableColumn">
    <div *name="COLUMNNAME"></div> <!-- what i want to achieve -->
</ed-table>

Table component: right now i'm trying to print a cell that should contains the element, but i honestly can't figure out how.

<table class="table">
  <thead *ngIf="showHeader">
  <tr>
    <th *ngFor="let col of columns">
      {{col}}
    </th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of sourceData"
      ed-table-row
      [data]="data"
      [columns]="columns">
    <span *name="let name">
      {{name}}
    </span>
  </tr>
  </tbody>
</table> 

table row:

<td *ngFor="let col of columns">
  <ng-template [ngIf]="data[col] !== undefined">
    {{data[col]}}
  </ng-template>
  <ng-template [ngIf]="data[col] === undefined">
    <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: data[col]}"></ng-template>
  </ng-template>
</td>

 

Table row ts:

export class TableRowComponent {
  @Input() data: any;
  @Input() columns: string[];
  @ContentChild(TemplateRef) templateRef: TemplateRef<any>;

  constructor() {
  }

} 

Can someone give me some hints? Thanks!

question from:https://stackoverflow.com/questions/66047055/angular-print-additional-tds-inside-a-component-table-based-on-header

Answer 1

Waitting for answers