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

Answer 1

I have faced issue in hiding mat-paginator using *ngIf so I fixed it using below workaround. Define the below style in global.scss and apply the this style conditionally in mat-paginator

.hide-paginator {
  display: none !important;
}

<mat-paginator 
[length]="totalElements"
      [pageSize]="searchDefinition.size" [pageSizeOptions]="paginationOptions" 
      [ngClass]="{'hide-paginator': data.length <= 0 }">
</mat-paginator>
  

Answer 2

Just adding static:false instead true, working fine @ViewChild(MatSort, {static: false})e }) public sortaddEpisode: MatSort;

Answer 3

Adding <tr> tag in your html code and adding mat-sort-header="fieldname" you can get resolved.

Answer 4

In your component.ts, replace this code

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

with this :

  private paginator: MatPaginator;
  private sort: MatSort;


  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.setDataSourceAttributes();
  }

  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setDataSourceAttributes();
  }

  setDataSourceAttributes() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

And in your html:

    <mat-card *ngIf="!dataSource?.filteredData.length" style="margin-bottom: 5px">
        <div><span>ZERO RESULT</span></div>
    </mat-card>

    <mat-card *ngIf="dataSource?.filteredData.length">
    ** insert the table code that you have **
    </mat-card>

Answer 5

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.