Angular Material Table Dynamic Columns Without Model


Answer :

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:)


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> 

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable