Angular Material Table Dynamic Columns without model
Solution 1:
I found solution :) It is very very easy but i could't see at first :) only like that :
<mat-cell *matCellDef="let element "> {{element[disCol]}} </mat-cell>
I must use {{element[disCol]}}
only in HTML.
Now , everything is ok:)
Solution 2:
For a full working example based on @mevaka's
Where jobDetails$
is the array of items.
columns$
is equvilent to Object.keys(jobDetails$[0])
so is just an string[]
<table mat-table [dataSource]="jobDetails$ | async">
<ng-container *ngFor="let disCol of (columns$ | async); let colIndex = index" matColumnDef="{{disCol}}">
<th mat-header-cell *matHeaderCellDef>{{disCol}}</th>
<td mat-cell *matCellDef="let element">{{element[disCol]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="(columns$ | async)"></tr>
<tr mat-row *matRowDef="let row; columns: (columns$ | async)"></tr>
</table>