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

March 25, 2023 by Tarik

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" [attr.colspan]="displayedColumns.length">
    No data matching the filter.
  </td>
</tr>