mat-filtering/mat-sort not work correctly when use ngif in mat-table parent

Question

Note that paging/sort not work correctly. Paging does not show the number of elements it is showing and sorting does not work, but if you delete the line in the html file *ngIf="dataSource?.filteredData.length > 0" the error is fixed. If you use filtering, it works, but it does not show the filter amount

Check the example.

https://stackblitz.com/edit/angular-wqkekh-nm3pn2?file=app/table-pagination-example.html

Answer 1

This can be solved by the following strategy:

dataSource = new MatTableDataSource();

@ViewChild(MatSort, {static: false}) set content(sort: MatSort) {
  this.dataSource.sort = sort;
}

Now even if you use *ngIf, it will work.