title: Angular Material *matNoDataRow doesn't work
body: <p>I've made a MatTable where you can filter. If there is no data matching the filter, I want to show a text using the *<strong>matNoDataRow</strong> directive mentioned in the Angular Material documentation. However, it doesn't work as in the examples by Angular Material.
  Is there something I forgot? Or is this directive not yet working?
  I use Angular 9.</p>
  <p>Here is my table:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field color=&quot;accent&quot; appearance=&quot;fill&quot; &gt;
      &lt;mat-label &gt;Filter&lt;/mat-label&gt;
      &lt;input matInput (keyup)=&quot;doFilter($event.target.value)&quot; placeholder=&quot;filter this table&quot; (click)=&quot;searching=true&quot; #input &gt;
      &lt;button mat-icon-button matSuffix (click)=&quot;input.value=''; doFilter(''); searching= !searching&quot; color=&quot;accent&quot;&gt;
          &lt;mat-icon *ngIf=&quot;!searching&quot;&gt;search&lt;/mat-icon&gt;
          &lt;mat-icon *ngIf=&quot;searching&quot;&gt;clear&lt;/mat-icon&gt;
      &lt;/button&gt;
  &lt;/mat-form-field&gt;
  
  &lt;div class=&quot;sticky-container&quot; style=&quot;margin-top: 2em;&quot;&gt;
      &lt;table mat-table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8&quot; matSort matSortActive=&quot;EXPIRY DATE&quot; matSortDirection=&quot;asc&quot; matSortDisableClear&gt;
  
          &lt;ng-container matColumnDef=&quot;id&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;CUSTOMER ID&lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let customer; let i = index&quot; class=&quot;no-outline&quot; 
                  routerLink=&quot;/summary/customer/{{customerService.id}}&quot;&gt;{{customer.id}}&lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef=&quot;exDate&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;EXPIRY DATE&lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let customer; let i = index&quot; class=&quot;table-bold no-outline&quot; 
                  routerLink=&quot;/summary/customer/{{customerService.id}}&quot;&gt;{{customer.exDate | date: &quot;dd.MM.yyyy&quot;}}&lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef=&quot;companyName&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;COMPANY / PARTNER&lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let customer; let i = index&quot;  class=&quot;no-outline&quot; 
                  routerLink=&quot;/summary/customer/{{customerService.id}}&quot;&gt;{{customer.companyName}}&lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef=&quot;export&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt;&lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let customer; let i = index&quot;&gt;
                  &lt;button mat-icon-button matTooltip=&quot;export&quot; (click)=&quot;export()&quot;&gt;
                      &lt;mat-icon color=&quot;primary&quot;&gt;get_app&lt;/mat-icon&gt;
                  &lt;/button&gt;
              &lt;/td&gt;
          &lt;/ng-container&gt;
          
          &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns; sticky: true&quot; &gt;&lt;/tr&gt;
          &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns; let i = index&quot; (mouseover)=&quot;customerService.getId([row.id])&quot;&gt;&lt;/tr&gt;
          
          &lt;!-- Row shown when there is no matching data.--&gt;
          &lt;tr class=&quot;mat-row&quot; *matNoDataRow&gt;
              &lt;td class=&quot;mat-cell&quot; colspan=&quot;4&quot;&gt;No data matching the filter &quot;{{input.value}}&quot;&lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;/table&gt;
      
      &lt;mat-paginator [pageSize]=&quot;10&quot; [pageSizeOptions]=&quot;[10, 20, 30, 100, dataSource.data.length]&quot; color=&quot;accent&quot;&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>