Redirect to Previous Page In Angular

Question

I have installed a package called ngx-pagination. But i have a problem since when you navigate away from the previous page and you click the back button, it redirects you to the first page instead of going back to the previous page? How can i make it return to the previous page if i click the back button in the browser? Here's my code below.

TS

     config: any; 

     constructor() {
        this.config = {
                currentPage: 1,
                itemsPerPage: 2
            };

         this.route.paramMap
            .map(params => params.get('page'))
            .subscribe(page => this.config.currentPage = page);
            }
      }

      ngOnInit() {
            this.getAllBooks();


      }

      pageChange(newPage: number) {
           this.router.navigate(['/books'], { queryParams: { page: newPage } });
  }

        getAllBooks() {
            this.subscription = this.booksService.getAll()
            .subscribe(
                (data:any) => {
                    this.books = data;
                console.log(data);
            },
            error => {
                console.log(error);
            });
        }

HTML

<tbody>
          <tr *ngFor="let book of books | paginate: { itemsPerPage: config.itemsPerPage, currentPage: config.currentPage }">
            <td>{{ book.SKU }}</td>
            <td>{{ book.name }}</td>
            <td>{{ book.description }}</td>
         </tr>
        </tbody>
        </table>
        <pagination-controls (pageChange)=“pageChange($event)” class="my-pagination"></pagination-controls>

Answer 1

I believe the problem you’re facing is because your are not using the router to store the current page. So when you click the back button on the browser it will do a router navigation and not a pagination navigation.

So instead of only updating the current page on the control, what you need to do is also store the page in the router every time a page is changed and do a navigation. This way independently if you navigate back and forth on the browser buttons the page number is always in sync.

The other advantage of using this approach is that you will be able to open the url on a new tab and start on the correct page, or even share with someone else and it will point directly on the page you are expecting, instead of resetting it to the first page.

You can check an example of implementation here, on the documentation of the ngx-pagination itself.

Answer 2

The issue you are facing is because of navigation :

pageChange(newPage: number) {
    this.router.navigate(['/books'], { queryParams: { page: newPage } });
}

You should not call this.router.navigate, instead of that directly call it like :

constructor() {
    let currentPage = localStorage.getItem('currentPage');
    this.config = {
        currentPage: currentPage ? currentPage : 1 ,
        itemsPerPage: 2
    };
}

pageChange(newPage: number) {
    localStorage.setItem('currentPage', newPage);
    this.config.currentPage = newPage;
}