1

Trying to do the following:

  • paginate data on browser back button IF user has gone through the pagination itself meaning if this.currentPage >0.

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

Abhishek Kumar
  • 2,501
  • 10
  • 25
Jazib
  • 1,343
  • 13
  • 27

1 Answers1

1

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);
}
leonardovff
  • 66
  • 3
  • Hi, Changing the logic is the least of the priorities. I want to do it without the path variables – Jazib Mar 24 '19 at 21:28
  • The problem is the angular core must created one listener on history event. To stop this, I think is impossible. Look: https://stackoverflow.com/questions/1115000/javascript-stop-additional-event-listeners – leonardovff Mar 26 '19 at 20:20
  • look my new suggestion – leonardovff Mar 26 '19 at 20:30