How to show "no records" if filter has no results in material table angular

Question

I want to add "No Records Message" If someone search current table is showing empty data!

Below is the link for sample material tables in angular js https://material.angular.io/components/table/examples

Answer 1

I found the exact solution

In typescript :

applyFilter(filterValue: string) {
 filterValue = filterValue.trim(); // Remove whitespace
 filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
 this.dataSource.filter = filterValue;
 if(this.dataSource.filteredData.length==0){
   this.displayNoRecords=true;
 }else{
   this.displayNoRecords=false;

 }
}

In Template

<mat-card  *ngIf="displayNoRecords" style="padding:100px;">
  <h3 style="text-align:center">We couldn't find data for 
 <span style="color:red">"{{dataSource.filter}}"</span><br>
Make sure the label,type or status are spelled and formatted correctly
</h3>
</mat-card>