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