CODEWITHSUNDEEP
angularpaginationangular-materialangular7
MGs
MGs

Reputation: 453

reset paginator first page angular material

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.

Upvotes: 25

Views: 45433

Answers (5)

Kumara
Kumara

Reputation: 528

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

Upvotes: 0

Bhavesh Jain
Bhavesh Jain

Reputation: 19

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.

Upvotes: 1

Stromwerk
Stromwerk

Reputation: 780

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

Upvotes: 43

Rohan Shenoy
Rohan Shenoy

Reputation: 895

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

Upvotes: 11

Shubham Verma
Shubham Verma

Reputation: 151

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

Upvotes: 15

Related Questions