How to show "No Data Available" message when using an angular mat-table with column filter

I have an Angular Mat-Table which has a column filter which is implemented via filterPredicate. I want to show a message like “No Data Available” when the table is empty.

I have

 <div *ngIf="tableDataSource.data.length === 0">
    <h3>No Data Available</h3>
  </div>

where the table has [dataSource] = tableDataSource.
This implementation is working when there is no data.
When I try to give a value in the column filter, although the
tableDataSource.filter = JSON.stringify(...) is being executed and data is getting filtered in the table, the tableDataSource has no change in itself, and therefore the “No Data Available” div is not getting displayed when there are no rows after filtering.

Source: New feed
Source Url How to show "No Data Available" message when using an angular mat-table with column filter