Angular Material Table Dynamic Columns without model

Question

I need to use angular material table without model, because I don't know what will come from service.

So I am initializing my MatTableDataSource and displayedColumns dynamically in component like that :

TableComponent :

ngOnInit() {

this.vzfPuanTablo = [] //TABLE DATASOURCE

//GET SOMETHING FROM SERVICE 
this.listecidenKisi = this.listeciServis.listecidenKisi;
this.listecidenVazife = this.listeciServis.listecidenVazife;

//FILL TABLE DATASOURCE 
var obj = {};
for (let i in this.listecidenKisi ){
    for( let v of this.listecidenVazife[i].vazifeSonuclar){
        obj[v.name] = v.value;
    }
    this.vzfPuanTablo.push(obj);
    obj={};
}

//CREATE DISPLAYED COLUMNS DYNAMICALLY
this.displayedColumns = [];
for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.push(v);
}

//INITIALIZE MatTableDataSource
this.dataSource = new MatTableDataSource(this.vzfPuanTablo);
}

---

The most important part of code is here :

for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.push(v);
}

I am creating displayedColumns here dynamically, it means; even I don't know what will come from service, I can show it in table.

For example displayedColumns can be like that:

• ["one", "two" , "three" , "four" , "five" ]

or

• ["stack","overflow","help","me]

But it is not problem because I can handle it.

---

But when I want to show it in HTML, I can't show properly because of matCellDef thing:

TableHtml :

    <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">

        <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
            <mat-header-cell *matHeaderCellDef>{{disCol}}</mat-header-cell>
            <mat-cell *matCellDef="let element "> {{element.disCol}}
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

My problem is here:

< mat-cell *matCellDef="let element "> {{element.disCol}} < / mat-cell>

In fact, I want to display element."disCol's value" in the cell, but I don't know how can I do that.

Otherwise, everything is ok except this element."disCol's value" thing.

---

When I use {{element.disCol}} to display value of element that has disCols's value , all cells are empty like that:

Other example that using {{element}} only:

---

Also as you can see:

1. Table datasource is changing dynamically. It means I can't use {{element.ColumnName}} easily, because I don't know even what is it.

   • First Example's displayedColumns = ['Vazife', 'AdSoyad', 'Kirmizi', 'Mavi', 'Yesil', 'Sari'];
   • Second Example's displayedColumns = ['Muhasebe', 'Ders', 'Egitim', 'Harici'];

2. matHeaderCellDef is correct , because it is using {{disCol}} directly.

But I need to read disCol's value, and display element.(disCol's value) in the cell.

How can I do that ?

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

Answer 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>