Changing paginator pageSize property doesn't refresh the table

Question

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);

See the code in Stackblitz.

I would change the question title to `Changing paginator pageSize property doesn't refresh the table` — Aviad P., Jul 14 '21 at 05:31

score 3 · Accepted Answer · answered Jul 14 '21 at 06:29

3

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

answered Jul 14 '21 at 06:29

Chintan Joshi

1,207
1
9
17

score 2 · Answer 2 · answered Jul 14 '21 at 05:30

2

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);
  }

answered Jul 14 '21 at 05:30

Aviad P.

32,036
14
103
124

It didn't work for me. Not sure why. could it be because my paginator is defined in `ngOnInit` like this `setTimeout(() => this.dataSource.sort = this.sort);` – Grayrigel Jul 14 '21 at 06:39
If you make this change in your stackblitz it works. Not sure how your actual code looks tho. – Aviad P. Jul 14 '21 at 07:01

Changing paginator pageSize property doesn't refresh the table

2 Answers2