Here is I am getting pageIndex and pageSize as input. Initialing datasource paginatore and setting data to dataSource.
@Input()
public set pageIndex(index: number) {
this._pageIndex = index;
setTimeout(() => {
this.paginator._changePageSize(this.paginator.pageSize);
});
}
@Input()
public set pageSize(pageSize: number) {
this._pageSize = pageSize;
setTimeout(() => {
this.paginator._changePageSize(this.paginator.pageSize);
});
}
public get pageIndex(): number {
return this._pageIndex;
}
public get pageSize(): number {
return this._pageSize;
}
dataSource = new MatTableDataSource<any>([]);
@Input()
public set data(d: any[]) {
this.dataSource.paginator = this.paginator;
this.dataSource.data = d;
this.selection.clear();
}
ngAfterViewInit(): void {
// this.dataSource.paginator = this.paginator;
this.dataSource.sort = this._sort;
this.filterCtrl.valueChanges
.pipe(takeUntil(this._unsubscribe$))
.subscribe((searchTerm: string) => {
this.dataSource.filter = searchTerm.trim().toLowerCase();
});
}
I am defining mat-paginator like the following-
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
Here is my html template for paginator -
<mat-paginator #paginator (page)="pageChangeEvent($event)" [pageIndex]="pageIndex" [pageSizeOptions]="[10, 20, 50, 100, 500]" [pageSize]="pageSize" showFirstLastButtons>
</mat-paginator>
How to reproduce the problem?
- move to the next page suppose third page (i.e; pageIndex = 2)
- reloading the page or move to another route and come back to the same route.
What behavior I want? On navigating back to the same route or after reloading the page, I should be on the same pageIndex.
What is the problem? But I am redirected to the first page i.e; pageInde = 0;
What is the behavior? on reloading the page or routing back to the same route, for a moment I get pageIndex as 2, but after that it automatically get sets to 0.