angular ng-content not reflecting dynamic content

Question

I have been creating a custom datatable component using cdk table functionalities. Row and header definitions were supposed to be outside the component. So i have put an ng-content tag inside the table and tried to input the headers and rows from out of component to be reflected there. However nothing is reflected inside table. I guess it doesn't works with ng-container but if someone could point me in the right direction what should be used instead for this use case. Here is the snippet.

simple-table.html

<table cdk-table [dataSource]="dataSource">
  <ng-content></ng-content>
</table>

app.component.html

<simple-table [dataSource]="dataSource">
  <ng-container cdkColumnDef="username">
    <th cdk-header-cell class="table-header" *cdkHeaderCellDef> User name </th>
    <td cdk-cell *cdkCellDef="let row" class="cell-text"> {{row.id}} </td>
  </ng-container>

  <ng-container cdkColumnDef="age">
    <th cdk-header-cell class="table-header" *cdkHeaderCellDef> Age </th>
    <td cdk-cell *cdkCellDef="let row" class="cell-text">{{row.status}}</td>
  </ng-container>

  <tr cdk-header-row *cdkHeaderRowDef="['username', 'age']"></tr>
  <tr cdk-row *cdkRowDef="let row; columns: ['username', 'age']"></tr>
</simple-table>

question from:https://stackoverflow.com/questions/65861905/angular-ng-content-not-reflecting-dynamic-content

Answer 1

Waitting for answers