CODEWITHSUNDEEP
javascriptangulartypescriptangular-materialangular-router
Jazib
Jazib

Reputation: 1381

How to paginate using browser back button in Angular material paginator?

Trying to do the following:

Currently what I have tried is 

ngOnInit(): void {
 this.location.onPopState((event)=>{
  if(this.currentPage >0){
    window.history.go(0);

    event.preventDefault(); //not stoping the event

    this.currentPage = this.currentPage -1;
    if (this.currentPage * this.pageSize >= this.placements.length - this.pageSize) {
      this.loadMorePlacements();
    }
    this.updatePaginator();
    this.updateStorePaginator();

  }
 });
}

Problem is the event is not stopped and the application is taken to the previous route.

Is there a way to stop the event and just paginate the data? Any help would be appreciated

Upvotes: 1

Views: 2476

Answers (1)

leonardovff
leonardovff

Reputation: 66

Can you change the logic of paginator?

If yes, you can put the page number in route and use the route to paginate the data, with this you don't need to listener browser event.

Example (routing):

{ path: 'list/:page',      component: ExampleComponent },

ExampleComponent

constructor(private route:ActivatedRoute){}
ngOnInit(){
   this.route.params.subscribe( params => {
      this.currentPage = params['page'];
      this.updatePaginator();
      this.updateStorePaginator();
   });
}

The btn to change the page:

<a routerLink="/list/5">Page 5</a>

To update the path with the change of paginator you can do this

<mat-paginator (page)="change($event)">
</mat-paginator>

change(e.page){
   this.router.parent.navigate(e.page);
}

Upvotes: 1

Related Questions