reset paginator first page angular material

Question

I am trying to go to the first page of the mat-paginator, that is, reset the pagination, but it does not work. Any idea how it can be solved?

My html is such that

<mat-paginator [length]="itemTotal" [pageIndex]="page" [pageSize]="itemPage" (page)="pageEvent = getPublicationFollowersData($event)">
    </mat-paginator>

The typescript:

   getPublicationFollowersData(event?: PageEvent) {
      this.getPublicationsUser(event.pageIndex);
}

and i try to initialize the page with:

this.page = 1

But it does not work.

Stromwerk · Accepted Answer · 2019-12-10T16:57:03.107

39

You need to use a ViewChild decorator to select the paginator and then set the pageIndex property of the paginator.

@ViewChild() paginator: MatPaginator;
...
this.paginator.pageIndex = 0;

Edit: As suggested by the other answers, if you would like to reset the paginator to the first page, it would be better to use this.paginator.firstPage()

edited Dec 10 '19 at 16:57

answered Mar 08 '19 at 23:35

Stromwerk

710
8
18

It doesn't work for me, I have an error : `TypeError: Cannot set property 'pageIndex' of undefined` – Touchard Antoine Dec 07 '20 at 08:34
this.paginator.firstPage() also works if you want to be explicit as hell. – Austin Born Dec 30 '20 at 21:20
add setTimeout function , 'pageIndex' issue did not , setTimeout(()=>{ this.paginator.pageIndex = 0; }); – Kumara Jan 11 '23 at 04:06

score 14 · Answer 2 · answered Jul 04 '19 at 10:21

<mat-paginator #paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="pageEvent = paginationClicked($event)">
</mat-paginator>
@ViewChild('paginator') paginator: MatPaginator;
this.paginator.firstPage();

score 10 · Answer 3 · answered Oct 03 '19 at 09:45

Create a referecne for material angular paginator along with data source

dataSource: MatTableDataSource<any>;
@ViewChild(MatPaginator) paginator: MatPaginator;

You want to reset the paginator using the following code

this.dataSource.paginator = this.paginator;

You can also reset by calling the first page method of the paginator

this.paginator.firstPage();

score 1 · Answer 4 · answered Jul 20 '20 at 14:31

1

if using

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

it should be

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

if static:true the paginator object is undefined.

answered Jul 20 '20 at 14:31

Bhavesh Jain

19
2

I have undefined error with { static : false} :( – Touchard Antoine Dec 07 '20 at 08:36
1

This depends on the template it's written on, and is not required in the latest versions of angular – Ben Taliadoros May 13 '21 at 13:11

score 0 · Answer 5 · answered Jan 11 '23 at 04:09

@ViewChild('paginator') paginator: MatPaginator;

 this.paginator.firstPage();

<mat-paginator #paginator [length]="length"
           [pageSize]="pageSize"
           [pageSizeOptions]="pageSizeOptions"
           (page)="pageEvent = paginationClicked($event)">

now you can reset the pagination using below

    setTimeout(()=>{this.paginator.pageIndex = 0;});

reset paginator first page angular material

5 Answers5

Linked