title: Angular Material table dynamic columns
body: <p>I have created mat-table component which generate dynamic columns by data which i pasted, but  without Action icons.</p>
  <pre><code>    &lt;table mat-table [dataSource]=&quot;data&quot; class=&quot;mat-elevation-z8&quot;&gt;
  
        &lt;ng-container [matColumnDef]=&quot;item.columnDef&quot; *ngFor=&quot;let item of columns; let i = index&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;{{ item.header }}&lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;{{ element[item.columnDef] }}&lt;/td&gt; 
        &lt;/ng-container&gt;
  
        &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns&quot;&gt;&lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  <p>Data are pasted by <strong>Input()</strong> from another component.</p>
  <pre><code>    columns: Column [] = [
      {columnDef: 'faculty_id', header: 'ID'},
      {columnDef: 'faculty_name', header: 'Faculty'},
      {columnDef: 'faculty_description', header: 'Description'},
      {columnDef: 'action', header: 'Actions', actions: [
        {type: tableActionsType.Edit, icon: 'edit', matTooltip: 'Edit'},
        {type: tableActionsType.Delete, icon: 'delete', matTooltip: 'Delete'}
      ]}
    ];
  </code></pre>
  <ul>
  <li></li>
  </ul>
  <h2>What i need:</h2>
  <p>I want to generate  column <strong>Actions</strong> with icons,</p>
  <p>-</p>
  <h2>Problem:</h2>
  <p>I need to check in  this loop <code>*ngFor=&quot;let item of columns;</code>  when <code>item.columnDef === 'action'</code> and render <em>mat-icon</em></p>
  <pre><code>    &lt;ng-container [matColumnDef]=&quot;item.columnDef&quot; *ngFor=&quot;let item of columns; let i = index&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;{{ item.header }}&lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;
  
        // if item.columnDef == 'action' then mat-icon
        // else  {{ element[item.columnDef] }}
  
         &lt;mat-icon aria-hidden=&quot;false&quot; aria-label=&quot;edit&quot; *ngFor=&quot;let icon of item.actions&quot; [matTooltip]=&quot;icon.matTooltip&quot; (click)=&quot;check()&quot;&gt;{{icon.icon}}&lt;/mat-icon&gt;
     
        &lt;/td&gt;
    &lt;/ng-container&gt;
  </code></pre>