reset paginator first page angular material
Solution 1
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()
Solution 2
<mat-paginator #paginator [length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="pageEvent = paginationClicked($event)">
</mat-paginator>
@ViewChild('paginator') paginator: MatPaginator;
this.paginator.firstPage();
Solution 3
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();
Solution 4
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.
Related videos on Youtube
MGs
Updated on July 09, 2022Comments
-
MGs almost 2 years
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.
-
Touchard Antoine over 3 yearsIt doesn't work for me, I have an error :
TypeError: Cannot set property 'pageIndex' of undefined
-
Touchard Antoine over 3 yearsI have undefined error with { static : false} :(
-
Austin Born over 3 yearsthis.paginator.firstPage() also works if you want to be explicit as hell.
-
Ben Taliadoros almost 3 yearsThis depends on the template it's written on, and is not required in the latest versions of angular