Angular Material *matNoDataRow doesn't work

Question

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>

Answer 1

I agree with Jesse. It works well in Angular 10. There is nothing wrong with your code. Even I did the same to check.

<tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4">No data found</td>
</tr>

Answer 2

That feature is only available in the latest version of Angular (v10). If you switch the documentation to show v9 (right now it shows 9.2.4), you'll see that feature isn't part of the API.

That said, I can't get it to work either. Even in Angular 10. :(

UPDATE: I did get it to work. (I'm using Angular 10.0.1). My working code looks exactly how you've implemented it. So upgrading to Angular 10 should do the trick for you.