How to show empty message in data table angular material, If no data found

Question

I am using this code

 <mat-table #table [dataSource]="dataSource" matSort >   <ng-container matColumnDef="tache">     <mat-header-cell *matHeaderCellDef mat-sort-header> tâche </mat-header-cell>     <mat-cell *matCellDef="let element"> {{element.tache}} </mat-cell>   </ng-container>    <ng-container matColumnDef="outil">     <mat-header-cell *matHeaderCellDef mat-sort-header> outil </mat-header-cell>     <mat-cell *matCellDef="let element"> {{element.outil}} </mat-cell>   </ng-container>  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>   <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">   </mat-row> </mat-table> 

So, how to show empty message "No Record found" in data table.

Answer 1

With Angular Material 10 or above If you want to show a message when not data matches the filter, you can use the *matNoDataRow directive.

 <tr class="mat-row" *matNoDataRow>   <td class="mat-cell" colspan="9999">     No data matching the filter   </td> </tr> 

Answer 2

It's like bugs is saying, you can just use *ngIf. Compare these two tables here:

https://stackblitz.com/edit/angular-w9ckf8

<mat-toolbar color="primary">My empty table</mat-toolbar>  <mat-table #table [dataSource]="dataSourceEmpty" matSort *ngIf="dataSourceEmpty.length > 0">     <ng-container matColumnDef="Name">         <mat-header-cell *matHeaderCellDef mat-sort-header>Name </mat-header-cell>         <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>     </ng-container>      <ng-container matColumnDef="Age">         <mat-header-cell *matHeaderCellDef mat-sort-header>Age </mat-header-cell>         <mat-cell *matCellDef="let element"> {{element.age}} </mat-cell>     </ng-container>     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>     <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="row.toggle(row)">     </mat-row> </mat-table>  <div *ngIf="dataSourceEmpty.length === 0">No records found</div>  <hr>  <mat-toolbar color="primary">My full table</mat-toolbar>  <mat-table #table [dataSource]="dataSource" matSort *ngIf="dataSource.length > 0">     <ng-container matColumnDef="Name">         <mat-header-cell *matHeaderCellDef mat-sort-header>Name </mat-header-cell>         <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>     </ng-container>      <ng-container matColumnDef="Age">         <mat-header-cell *matHeaderCellDef mat-sort-header>Age </mat-header-cell>         <mat-cell *matCellDef="let element"> {{element.age}} </mat-cell>     </ng-container>     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>     <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="row.toggle(row)">     </mat-row> </mat-table>  <div *ngIf="dataSource.length === 0">No data</div> 

TS with data:

displayedColumns = ['Name', 'Age'] dataSource = [{name:'Sara',age:17}, {name: 'John', age: 20}] dataSourceEmpty = []