Angular: ng-content within mat-table

Question

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 table, this my template:

<div>
    <table mat-table [dataSource]="tableData.dataSource" matMultiSort (matSortChange)="_emitParentEvent">
        <ng-content></ng-content>
        <tr mat-header-row *matHeaderRowDef="tableData.displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: tableData.displayedColumns;"></tr>
    </table>
    <mat-paginator [pageSize]="tableData.pageSize" [pageIndex]="tableData.pageIndex"
        [pageSizeOptions]="tableData.pageSizeOptions" [length]="tableData.size ? tableData.size : 0"
        (page)="tableData.onPagnationEvent($event)">
    </mat-paginator>

</div>

And here is the code for the component:

@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<any>;
  @Output() matMulitSortChange: EventEmitter<MutliSortItem[]> = new EventEmitter<MutliSortItem[]>();

  @ViewChild(MatMultiSort, { static: false }) sort: MatMultiSort;

  constructor() { }

  ngOnInit() {
    this.tableData.dataSource.sort = this.sort;
  }

  _emitParentEvent() {
    const tmpItmes = [];
    for (let i = 0;*emphasized text* i < this.sort.actives.length; i++) {
      tmpItmes.push(new MutliSortItem(this.sort.actives[i], this.sort.directions[i]));
    }
    this.matMulitSortChange.emit(Object.assign([], tmpItmes));
  }
}

No when I pass some content to my component, like the following;

<mat-multi-sort-table [tableData]="table" (matMulitSortChange)="console.log($event)">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="id"> ID </th>
      <td mat-cell *matCellDef="let row"> {{row.id}} </td>
    </ng-container>

    <ng-container matColumnDef="progress">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="progress"> Progress </th>
      <td mat-cell *matCellDef="let row"> {{row.progress}}% </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="name"> Name </th>
      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
    </ng-container>

    <ng-container matColumnDef="color">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="color"> Color </th>
      <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </td>



    </ng-container>

    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="date"> Date </th>
      <td mat-cell *matCellDef="let row"> {{row.date | date:'YYYY-MM-DD HH:mm'}} </td>
    </ng-container>

</mat-multi-sort-table>

I get the following error: ERROR Error: "Could not find column with id "id" I found out, that problem occurs because the table need its definitions at init time, which is not the case with the ng-content. Is there any workaround for this issue?

Answer 1

You have an example on angular material github : https://github.com/angular/components/tree/master/src/components-examples/material/table/table-wrapped.

You must do something like this :

export class WrapperTable<T> implements AfterContentInit {
  @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList<MatHeaderRowDef>;
  @ContentChildren(MatRowDef) rowDefs: QueryList<MatRowDef<T>>;
  @ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;

  @ViewChild(MatTable, {static: true}) table: MatTable<T>;

  ngAfterContentInit() {
    this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));
    this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
    this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef));
  }
}