title: Angular: ng-content within mat-table
body: <p>I try to create a wrapper for the angular material table with multi sorting. Therefore, I like to write a wrapper component for the default <code>table</code>, this my template:</p>
  
  <pre><code>&lt;div&gt;
      &lt;table mat-table [dataSource]="tableData.dataSource" matMultiSort (matSortChange)="_emitParentEvent"&gt;
          &lt;ng-content&gt;&lt;/ng-content&gt;
          &lt;tr mat-header-row *matHeaderRowDef="tableData.displayedColumns"&gt;&lt;/tr&gt;
          &lt;tr mat-row *matRowDef="let row; columns: tableData.displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;mat-paginator [pageSize]="tableData.pageSize" [pageIndex]="tableData.pageIndex"
          [pageSizeOptions]="tableData.pageSizeOptions" [length]="tableData.size ? tableData.size : 0"
          (page)="tableData.onPagnationEvent($event)"&gt;
      &lt;/mat-paginator&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the code for the component:</p>
  
  <pre><code>@Component({
    selector: 'mat-multi-sort-table',
    templateUrl: './mat-multi-sort-table.component.html',
    styleUrls: ['./mat-multi-sort-table.component.scss']
  })
  export class MatMultiSortTableComponent implements OnInit {
  
    @Input() tableData: TableData&lt;any&gt;;
    @Output() matMulitSortChange: EventEmitter&lt;MutliSortItem[]&gt; = new EventEmitter&lt;MutliSortItem[]&gt;();
  
    @ViewChild(MatMultiSort, { static: false }) sort: MatMultiSort;
  
    constructor() { }
  
    ngOnInit() {
      this.tableData.dataSource.sort = this.sort;
    }
  
    _emitParentEvent() {
      const tmpItmes = [];
      for (let i = 0;*emphasized text* i &lt; this.sort.actives.length; i++) {
        tmpItmes.push(new MutliSortItem(this.sort.actives[i], this.sort.directions[i]));
      }
      this.matMulitSortChange.emit(Object.assign([], tmpItmes));
    }
  }
  </code></pre>
  
  <p>No when I pass some content to my component, like the following;</p>
  
  <pre><code>&lt;mat-multi-sort-table [tableData]="table" (matMulitSortChange)="console.log($event)"&gt;
      &lt;ng-container matColumnDef="id"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-multi-sort-header="id"&gt; ID &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let row"&gt; {{row.id}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="progress"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-multi-sort-header="progress"&gt; Progress &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let row"&gt; {{row.progress}}% &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="name"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-multi-sort-header="name"&gt; Name &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let row"&gt; {{row.name}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="color"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-multi-sort-header="color"&gt; Color &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let row" [style.color]="row.color"&gt; {{row.color}} &lt;/td&gt;
  
  
  
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="date"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-multi-sort-header="date"&gt; Date &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let row"&gt; {{row.date | date:'YYYY-MM-DD HH:mm'}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
  &lt;/mat-multi-sort-table&gt;
  </code></pre>
  
  <p>I get the following error: <code>ERROR Error: "Could not find column with id "id"</code> I found out, that problem occurs because the table need its definitions at init time, which is not the case with the <code>ng-content</code>. Is there any workaround for this issue?</p>