Angular how to dynamically change page when changed it from the path?

Question

I have apagination problem in angular. Here is my code in html;

<!-- A div element for pagination part at the bottom of the page -->
<div style="margin-left: 50%; margin-top: 20px; margin-bottom: 20px">
    <ul class="pagination">
        <li class="page-item"><button class="page-link" (click)="selectedPage('Previous')">Previous</button></li>
        <li class="page-item" *ngFor="let p of page_num">
            <button class="page-link" (click)="selectedPage(p)" routerLink="/games/page/{{p}}">{{p}}</button>
        </li>
        <li class="page-item"><button class="page-link" (click)="selectedPage('Next')">Next</button></li>
    </ul>
</div>

As you can understna what this does is send the clicked page number to my ts file that has apiece of code like this;

/*Created an element called currentPage to get the current page and send it to getGames func (my subscribe func), this element will be dynamically change, but will start from 1*/
  currentPage = 1;
  //Created a page_num cevtor that will be change when page selected
  page_num : number[] = [this.currentPage, this.currentPage+1, this.currentPage+2];

    //Created a func called selectedPage in order to adjust the page numbers and send corretc page num to funcs, all the data I am using is sotred in a vector called gamesVector
      public selectedPage(page) {
        //If clicked option was 'Previous'
        if(page == 'Previous') {
          //If previous of that page is not null
          if(this.gamesVector.previous !== null) {
            this.currentPage--;
            this.page_num = [this.currentPage, this.currentPage+1, this.currentPage+2];
            this.router.navigate(['/games/page/' + this.currentPage])
          }
          else
            alert('You are already in the first page')
        }
        //If clicked option was 'Next'
        else if(page == 'Next') {
          //If next of that page is not null
          if(this.gamesVector.next !== null) {
            this.currentPage++;
            this.page_num = [this.currentPage, this.currentPage+1, this.currentPage+2];
            this.router.navigate(['/games/page/' + this.currentPage])
          }
          else  
            alert('You are already in the last page')
        }
        //If the clicked option was a page number
        else {
          this.currentPage = page;
          this.page_num = [this.currentPage, this.currentPage+1, this.currentPage+2];
        }
    
        //Then call the games subscribe function with the new page number, so the games can be refreshed
        this.gameAndCatServ.getGames(this.currentPage).subscribe(data => {
          this.gamesVector = data;
        })
    
        //To scroll all the way up when changing the page
        window.scrollTo(0, 0)
      }

This piece of code works perfectly, but the problem is this, when someone changes the page number from the path, it wont refresh because I guess I didnt do any two way bindings, but I couldnt figure if it was a right solution to do. Also, when I click on page 2 and then click go back button from browser itself, it again wont rfresh.

What should I do in order to refresh the page when pagenumber was changed from the path or someone has clicked go back button from browser itself, too?

Answer 1

Assuming that you have the path URL as something like: http://www.mywebsite.com/section

In order to reflect the changes when changing the path, you can use the "queryParameters" from Angular ActivatedRoute. Below is a simple example:

import { ActivatedRoute } from '@angular/router';

constructor(
    private readonly route: ActivatedRoute,
  ) {}

ngOnInit(): void {
  this.route.queryParams.subscribe(queryParams => {
    this.currentPage = !!queryParams['page'] ? queryParams['page'] : 1;
  });
}

Now, you can have a 2-way bindings for the pagination with query parameters

http://www.mywebsite.com/section?page=10