Search code examples
angularangular-materialmat-table

Changing paginator pageSize property doesn't refresh the table

I am new to web development (Angular). I am trying to bind a mat-select display records option to with mat-paginator with the following:

HTML:

 <div class="col">
    <span class="">Display</span>
    <mat-form-field id="display-record-count" appearance="outline" class="mx-2">
      <mat-select [(value)]="displayRecordCount">
        <mat-option value="5">5</mat-option>
        <mat-option value="10">10</mat-option>
        <mat-option value="20">20</mat-option>
      </mat-select>
    </mat-form-field>
    <span class="">records</span>
  </div>


<mat-paginator #paginator [pageSize]="displayRecordCount" [pageSizeOptions]="[5, 10, 20]">
  </mat-paginator>

TS:

displayRecordCount="10";

It doesn't work the way one would expect. It updates the item per page but doesn't update the mat-table.I am not sure what I am missing. Can anyone help me? I have tried the following:

 this.dataSource.paginator._changePageSize(+this.displayRecordCount);

enter image description here

See the code in Stackblitz.

Solution

  • Just take change event for dropdown as below.

    <mat-select (selectionChange)="this.paginator._changePageSize($event.value)">
...
</mat-select>

    And No require to bind value to displayRecordCount variable anymore.

    Checkout this stackblitz