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

Question

I am using this code

Answer 1

<mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(listData!=null && listData.filteredData.length==0)}"></mat-footer-row>

I was able to solve the problem by doing this. hide is a custom css

.hide{
    display:none;
} 

Answer 2

With Angular Material 10 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 3

My solution does not alter the footer, and shows the message inside of the actual table by using CSS and adding a box :before the footer:

First some CSS:

td.no-content {
  padding-top: 7rem;
}

td.no-content:before {
  content: attr(data-empty-message);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 3rem 0 3rem 0;
  background-color: white;
}

Then add the no-content class to the footer TD when nothing is showing:

<td mat-footer-cell *matFooterCellDef 
    [class.no-content]="dataSource.filteredData.length === 0" 
    data-empty-message="Nothing found..."
>

Answer 4

There are two ways to show error message in html

1st method using If method

<div *ngIf="dataSource.length">
  <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>
</div>

<div *ngIf="!dataSource.length">
No Record found
</div>

2nd Method Using If else

<div *ngIf="dataSource.length; else noRecord">
  <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>
</div>

<ng-template #noRecord>
 <div>
  No Record found
  </div>
</ng-template>

Answer 5

In newer Angular versions don't forget datasource.data if your datasource is of type MatTableDataSource.

Example:

In the TypeScript file:

// ...
datasource = new MatTableDataSource<object>([]);
// ...

And in the HTML file:

<div *ngIf="datasource.data.length > 0"> 
  <!--Show the table.-->
</div>

<div *ngIf="datasource.data.length === 0">
 <!--Show table is empty message. -->
</div>

Answer 6

In your component-name.component.html:

<div class="mat-elevation-z8">
    <mat-table [dataSource]="listData" matSort>
        <ng-container matColumnDef="fullName">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Full Name</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.fullName}}</mat-cell>
        </ng-container>
        ...
        ...
        <ng-container matColumnDef="noData">
            <mat-footer-cell *matFooterCellDef colspan="6">
                No data.
            </mat-footer-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

        <mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(listData!=null && listData.data.length==0)}"></mat-footer-row>
    </mat-table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>
</div>

In your style.scss or component-name.component.scss define .hide class

.hide { display: none; }

and that's all :)