Changing paginator pageSize property doesn't refresh the table

user_5604562 0
Viewed 1110

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.

mat-table angular-material angular
2 Answers

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

user_78123290

Apparently the paginator doesn't cause the data source to refresh just by changing its pageSize property, and calling paginator._changePageSize is required. You are probably doing it in the wrong place.

Add a setter to your property declaration to manually trigger a refresh, thus:

  _displayRecordCount = '10';

  get displayRecordCount() {
    return this._displayRecordCount;
  }
  set displayRecordCount(value) {
    this._displayRecordCount = value;
    this.paginator._changePageSize(+value);
  }
user_2356480
Related