title: How can i display "No records found" when there is no records in angular material tables
body: <p>I tried the below stackblitz link to display "No records found" message when there is no table data but the problem comes when I use data source of type <strong>MatTableDataSource</strong>.</p>
  
  <p>stackblitz link:
  <a href="https://stackblitz.com/edit/angular-w9ckf8" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-w9ckf8</a></p>
  
  <p>Below is the code snippet am using:</p>
  
  <pre><code>this.serviceDataSource = new MatTableDataSource(this.services);
  </code></pre>
  
  <p>corresponding html:</p>
  
  <pre><code>&lt;table mat-table [dataSource]="serviceDataSource" matSort *ngIf="serviceDataSource.length &gt; 0"&gt;
              &lt;ng-container *ngFor="let disCol of serviceColumns" matColumnDef="{{disCol}}"&gt;
                  &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;{{disCol}}&lt;/th&gt;
                  &lt;td mat-cell *matCellDef="let rowValue"&gt;{{rowValue[disCol]}}&lt;/td&gt;
              &lt;/ng-container&gt;
  
              &lt;tr mat-header-row *matHeaderRowDef="serviceColumns"&gt;&lt;/tr&gt;
              &lt;tr mat-row *matRowDef="let rowdata; columns: serviceColumns;"&gt;&lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;div *ngIf="serviceDataSource.length === 0"&gt;No records found&lt;/div&gt;
  </code></pre>
  
  <p>Below is the error am getting:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'length' of undefined</p>
  </blockquote>