title: How to show a empty message in dynamic data table angular
body: <p>I try to show an empty message error when the filter doesn't have matches with:</p>
  
  <pre><code>&lt;div *ngIf="dataSource.length === 0"&gt;No data&lt;/div&gt;
  </code></pre>
  
  <p>but it doesn't work because I build a dynamic table with MatTableDataSource.</p>
  
  <p>For a better understanding, I changed my dynamic table for an array predefined.</p>
  
  <pre><code>const ELEMENT_DATA: MembersElement[] = [
  { name: 'Jenny', age: 17 },
  { name: 'Daniel', age: 18 }
  ];
  </code></pre>
  
  <p>However, is necessary using MatTableDataSource to a dynamic building of the users' table</p>
  
  <p>This is all my ts code.</p>
  
  <pre><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();
    }
  }
  </code></pre>
  
  <p>This is my HTML code.</p>
  
  <pre><code>&lt;mat-toolbar color="primary"&gt;My full table&lt;/mat-toolbar&gt;
  &lt;mat-form-field&gt;
      &lt;input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"&gt;
  &lt;/mat-form-field&gt;
  &lt;mat-table #table [dataSource]="dataSource"&gt;
      &lt;ng-container matColumnDef="name"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Name &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{element.name}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="age"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Age &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{element.age}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;" (click)="row.toggle(row)"&gt;
      &lt;/mat-row&gt;
  &lt;/mat-table&gt;
  &lt;div *ngIf="dataSource.length === 0"&gt;No data&lt;/div&gt;
  </code></pre>