title: How to use i18n with Angular mat-table
body: <p>I cannot seem to translate dynamic column titles using i18n and Angular's mat-table.</p>
  
  <p>I tried using i18n-title [title]="field.i18n" and i18n-header [header]="field.18n" and i18n-table-header table-header="field.i18n" without any success.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table mat-table [dataSource]="dataSource"&gt;
        &lt;ng-container *ngFor="let field of tableData" [matColumnDef]="field.name"&gt;
          &lt;th mat-header-cell *matHeaderCellDef [i18n]="field.i18n"&gt;
            {{field.name}}
          &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt;
            {{element[field.dbField]}}
          &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;tr mat-header-row *matHeaderRowDef="getDisplayedColumns();"&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef="let row; columns: getDisplayedColumns();" &gt;&lt;/tr&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would expect the column title to come from field.name using i18n templates.</p>