Angular Material *matNoDataRow doesn't work

I've made a MatTable where you can filter. If there is no data matching the filter, I want to show a text using the *matNoDataRow directive mentioned in the Angular Material documentation. However, it doesn't work as in the examples by Angular Material. Is there something I forgot? Or is this directive not yet working? I use Angular 9.

Here is my table:

<mat-form-field color="accent" appearance="fill" >
<mat-label >Filter</mat-label>
<input matInput (keyup)="doFilter($event.target.value)" placeholder="filter this table" (click)="searching=true" #input >
<button mat-icon-button matSuffix (click)="input.value=''; doFilter(''); searching= !searching" color="accent">
<mat-icon *ngIf="!searching">search</mat-icon>
<mat-icon *ngIf="searching">clear</mat-icon>
</button>
</mat-form-field>

<div class="sticky-container" style="margin-top: 2em;">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort matSortActive="EXPIRY DATE" matSortDirection="asc" matSortDisableClear>

<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>CUSTOMER ID</th>
<td mat-cell *matCellDef="let customer; let i = index" class="no-outline"
routerLink="/summary/customer/{{customerService.id}}">{{customer.id}}</td>
</ng-container>

<ng-container matColumnDef="exDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header>EXPIRY DATE</th>
<td mat-cell *matCellDef="let customer; let i = index" class="table-bold no-outline"
routerLink="/summary/customer/{{customerService.id}}">{{customer.exDate | date: "dd.MM.yyyy"}}</td>
</ng-container>

<ng-container matColumnDef="companyName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>COMPANY / PARTNER</th>
<td mat-cell *matCellDef="let customer; let i = index" class="no-outline"
routerLink="/summary/customer/{{customerService.id}}">{{customer.companyName}}</td>
</ng-container>

<ng-container matColumnDef="export">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let customer; let i = index">
<button mat-icon-button matTooltip="export" (click)="export()">
<mat-icon color="primary">get_app</mat-icon>
</button>
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" ></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index" (mouseover)="customerService.getId([row.id])"></tr>

<!-- Row shown when there is no matching data.-->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>

</table>

<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 30, 100, dataSource.data.length]" color="accent"></mat-paginator>
</div>

Continue reading...