How to reset the paginator?

Question

How to reset the paginator and go to the first page? this.page = 1 does not work correctly. Just in case, I'll explain that I do not use MatPaginator.

ts:

  pageSizeOptions = [5, 10, 25, 50, 100];
  pageSize = 5;
  page = 1;

   applyFilter() {
    let searchFilter: any = {
      filterValue: this.search
    };
    this.categories.filter = searchFilter;
    if (this.page !== 1) {
      this.page = 1;
    } else {
      this.load();
    }
  }

  onPaginateChange(event) {
    this.page = event.pageIndex + 1;
    this.pageSize = event.pageSize;
    this.load();
  }

html:

<mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="totalItems" [pageSize]="pageSize"
      (page)="onPaginateChange($event)" showFirstLastButtons [disabled]="!isActive">
</mat-paginator>

https://jasonwatmore.com/post/2019/06/18/angular-8-simple-pagination-example — Joel Joseph, Sep 19 '19 at 05:37

Mustahsan · Accepted Answer · 2019-09-19T05:41:48.170

3

You need to set pageIndex of paginator, but you will have to use ViewChild decorator to select that paginator, so in your component:

@ViewChild(MatPaginator, {static:false}) paginator: MatPaginator;
...

and in your method:

this.paginator.pageIndex = 0;

edited Sep 19 '19 at 05:41

answered Sep 19 '19 at 05:30

Mustahsan

3,852
1
18
34

1

`TypeError: Cannot set property 'pageIndex' of undefined` – user12077267 Sep 19 '19 at 05:40
2

Angular 8: `@ViewChild(MatPaginator, undefined) paginator: MatPaginator;` – uminder Sep 19 '19 at 05:41
1

@uminder thanks, i updated my answer with angular 8 viewchild – Mustahsan Sep 19 '19 at 05:42
Angular 9: the { static: false } option will be made default [@Poul Kruijt](https://stackoverflow.com/questions/56359504/how-should-i-use-the-new-static-option-for-viewchild-in-angular-8/56359612) – Sadegh Maleki Sep 15 '21 at 07:16

score -1 · Answer 2 · answered Jul 09 '20 at 12:49

-1

I am using primeng. Please see below syntax to reset:

import { Paginator } from 'primeng/primeng';

@ViewChild('paginator') paginator: Paginator;


this.paginator.changePage(0);

answered Jul 09 '20 at 12:49

Learner

1
1

How to reset the paginator?

2 Answers2

Linked