title: Angular Material Table Dynamic Columns without model
body: <p>I need to use angular material table without model, because I don't know what will come from service.</p>
  <p>So I am initializing my <code>MatTableDataSource</code> and <code>displayedColumns</code> dynamically in component like that :</p>
  <p><strong>TableComponent :</strong></p>
  <pre class="lang-ts prettyprint-override"><code>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);
  }
  </code></pre>
  <hr />
  <p>The most important part of code is here :</p>
  <blockquote>
  <pre class="lang-ts prettyprint-override"><code>for( let v in this.vzfPuanTablo[0]) {
     this.displayedColumns.push(v);
  }
  </code></pre>
  </blockquote>
  <p>I am creating <code>displayedColumns</code> here dynamically, it means; even I don't know what will come from service, I can show it in table.</p>
  <p>For example <code>displayedColumns</code> can be like that:</p>
  <ul>
  <li>[&quot;one&quot;, &quot;two&quot; , &quot;three&quot; , &quot;four&quot; , &quot;five&quot; ]</li>
  </ul>
  <p>or</p>
  <ul>
  <li>[&quot;stack&quot;,&quot;overflow&quot;,&quot;help&quot;,&quot;me]</li>
  </ul>
  <p>But it is not problem because I can handle it.</p>
  <hr />
  <p>But when I want to show it in HTML, I can't show properly because of
  <code>matCellDef</code> thing:</p>
  <p><strong>TableHtml :</strong></p>
  <pre class="lang-xml prettyprint-override"><code>    &lt;mat-table #table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8&quot;&gt;
  
          &lt;ng-container *ngFor=&quot;let disCol of displayedColumns; let colIndex = index&quot; matColumnDef=&quot;{{disCol}}&quot;&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt;{{disCol}}&lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef=&quot;let element &quot;&gt; {{element.disCol}}
              &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
  
          &lt;mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/mat-header-row&gt;
          &lt;mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
  </code></pre>
  <p>My problem is here:</p>
  <blockquote>
  <pre class="lang-xml prettyprint-override"><code>&lt;mat-cell *matCellDef=&quot;let element &quot;&gt; {{element.disCol}} &lt; / mat-cell&gt;
  </code></pre>
  </blockquote>
  <p>In fact, I want to display <code>element.&quot;disCol's value&quot;</code> in the cell, but I don't know how can I do that.</p>
  <p>Otherwise, everything is ok except this <code>element.&quot;disCol's value&quot;</code> thing.</p>
  <hr />
  <p>When I use <code>{{element.disCol}}</code> to display <code>value of element that has disCols's value</code> , all cells are empty like that:</p>
  <p><a href="https://i.stack.imgur.com/XzB68.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XzB68.png" alt="enter image description here" /></a></p>
  <p>Other example that using <code>{{element}}</code> only:</p>
  <p><a href="https://i.stack.imgur.com/Upb14.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Upb14.png" alt="enter image description here" /></a></p>
  <hr />
  <p><strong>Also as you can see:</strong></p>
  <ol>
  <li><p>Table datasource is changing dynamically. It means I can't use <code>{{element.ColumnName}}</code> easily, because I don't know even what is it.</p>
  <ul>
  <li>First Example's displayedColumns = ['Vazife', 'AdSoyad', 'Kirmizi', 'Mavi', 'Yesil', 'Sari'];</li>
  <li>Second Example's displayedColumns = ['Muhasebe', 'Ders', 'Egitim', 'Harici'];</li>
  </ul>
  </li>
  <li><p><code>matHeaderCellDef</code> is correct , because it is using {{disCol}} directly.</p>
  </li>
  </ol>
  <p><em>But I need to read disCol's value, and display <code>element.(disCol's value)</code> in the cell.</em></p>
  <p><strong>How can I do that ?</strong></p>