TypeError: def.when is not a function in Angular Material Table

Question

I try to get an extra row with colspan (matColumnDef="table-filter") by using the when predicate. Fun-fact is, I use the same principle somewhere else in the app (other module) and it just works fine.

<table mat-table [dataSource]="dataSource">

    <ng-container matColumnDef="table-filter">
        <td mat-cell [attr.colspan]="displayedColumns.length" *matCellDef="let data">
            Test
        </td>
    </ng-container>

    <ng-container matColumnDef="some-column">
        <th mat-header-cell *matHeaderCellDef>
            Column-Titel
        </th>
        <td mat-cell *matCellDef="let data">
            {{ data.someField }}
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let role; columns: displayedColumns;"></tr>

    <!-- Extra row with when predicate -->
    <tr mat-row *matRowDef="let role; columns: ['table-filter']; when testBoolean;"></tr>
</table>

Here, I end up with TypeError: def.when is not a function. When I remove the extra row, the table just works fine (MatTableModule is of course imported).

Any thoughts?

• material: ^8.0.2
• angular: ^8.1.1

Answer 1

... silly me, 5 mins. after posting I figured that I used a boolen for the when-predicate - but this needs to be a function with following signature:

  /**
   * Function that should return true if this row template should be used for the provided index
   * and row data. If left undefined, this row will be considered the default row template to use
   * when no other when functions return true for the data.
   * For every row, there must be at least one when function that passes or an undefined to default.
   */
  when: (index: number, rowData: T) => boolean;