angularangular-materialangular-material-tableangular-material-paginator

mat-paginator breaks when mat-table is inside of NgIf

I have an angular project that is using mat-table and mat-paginator for a certain view, the problem is the view has a grid view and table view with a toggle, the grid view is default and table is hidden using an NgIf when the grid view is active. If I set the default to the table view then pagination works fine unless I swap to grid view and back, if the default if set to grid it breaks when I swap to the table view. I'm guessing its because the table is hidden when this code runs:

this.sliceList = new MatTableDataSource<Slice>(result);
this.sliceList.paginator = this.paginator;

I tried console logging this.sliceList and sliceList.paginator is undefined when the grid view is defaulted so I assuming this is the issue. How Can I fix this?

Solution

  • according to this thread,try use [hidden] instead of *ngIf.

    <div [hidden]="condition">
  <mat-table [dataSource]="dataSource">
  ...
  </mat-table>
</div>