How to show a empty message in dynamic data table angular

Question

I try to show an empty message error when the filter doesn't have matches with:

<div *ngIf="dataSource.length === 0">No data</div>

but it doesn't work because I build a dynamic table with MatTableDataSource.

For a better understanding, I changed my dynamic table for an array predefined.

const ELEMENT_DATA: MembersElement[] = [
{ name: 'Jenny', age: 17 },
{ name: 'Daniel', age: 18 }
];

However, is necessary using MatTableDataSource to a dynamic building of the users' table

This is all my ts code.

    import { Component, OnInit } from '@angular/core';
import {MatTableDataSource} from '@angular/material';

export interface SociosElement {
  nombre: string;
  edad: number;
}

const ELEMENT_DATA: MembersElement[] = [
  { name: 'Jenny', age: 17 },
  { name: 'Daniel', age: 18 }
];

@Component({
  selector: 'app-pruebas',
  templateUrl: './tableMembers.component.html',
  styleUrls: ['./tableMembes.component.css']
})
export class PruebasComponent {
  displayedColumns: string[] = ['name', 'age'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

This is my HTML code.

<mat-toolbar color="primary">My full table</mat-toolbar>
<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<mat-table #table [dataSource]="dataSource">
    <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>

Answer 1

You can't reach what you want using *ngIf="dataSource.length === 0" condition simply because the data source doesn't change at all when you do filtering. what you have to do is watch out for the filtered data length. you can use something like following: *ngIf="dataSource.filteredData.length > 0" as the condition. the length of datasource.filteredData changes based on the filtered results. this condition can hide your table. you can put this in your table tag like: <table mat-table [dataSource]="dataSource" *ngIf="dataSource.filteredData.length > 0">