Reputation: 453
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: 45403
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
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
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
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
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