Styjun

I have a pagination demo application in Angular. I am expecting to be able to navigate to a URL like http://localhost:4200/page/:number. The URL appears to be changing in the browser's URL address bar but I have to press Enter key on the browser's URL address bar in order to actually navigate to the URL and have the data change on the HTML table.

Stackblitz here: https://stackblitz.com/edit/angular-225jrs (HttpErrorResponse is not part of the question, but I don't know how to fix that in Stackblitz). Here is my code:

page.component.html:

<span *ngFor="let x of fakeArray; let index = index">
 <button type="button" class="btn btn-primary" (click)="goToPage(index)"> index + 1 </button>
</span>

<br><br>

<table class="table">
 <thead>
 <tr>
 <th>Alue-ID</th>
 <th>Kunta</th>
 <th>Lääni</th>
 <th>Maakunta</th>
 <th>Seutukunta</th>
 </tr>
 </thead>
 <tbody>
 <tr *ngFor="let municipality of municipalities">
 <td> municipality.alue_id </td>
 <td> municipality.kunta </td>
 <td> municipality.laani </td>
 <td> municipality.maakunta </td>
 <td> municipality.seutukunta </td>
 </tr>
 </tbody>
</table>

<span *ngFor="let x of fakeArray; let index = index">
 <button type="button" class="btn btn-primary" (click)="goToPage(index)"> index + 1 </button>
</span>

<br><br>

page.component.ts:

import Component, OnInit from '@angular/core';
import MunicipalitiesService from '../municipalities.service';
import municipality from '../municipality.interface';
import ActivatedRoute, Router from '@angular/router';

@Component(
 selector: 'app-page',
 templateUrl: './page.component.html',
 styleUrls: ['./page.component.css']
)
export class PageComponent implements OnInit 

 municipalities: municipality[] = [];
 pagenumber: number;
 fakeArray: any;

 constructor(
 private service: MunicipalitiesService, 
 private route: ActivatedRoute,
 private router: Router) 

 ngOnInit() 
 this.route.params.subscribe(params => 
 this.pagenumber = +params.number;
 )

 this.service.getOneHundredRecords(this.pagenumber).then((data: municipality[]) => 
 this.municipalities = data;
 );

 this.service.getPageCount().then((pageCount: number) => 
 this.fakeArray = new Array(pageCount);
 )
 

 goToPage = (index: number) => 
 this.router.navigate([`/page/$index`]);
 

municipalities.service.ts:

import Injectable from '@angular/core';
import HttpClient from '@angular/common/http';
import municipality from './municipality.interface';

@Injectable()
export class MunicipalitiesService 

 constructor(private http: HttpClient) 

 getOneHundredRecords = (page: number) => 
 return new Promise((resolve, reject) => 
 this.http.get("/assets/data.json").subscribe((data: municipality[]) => 
 let municipalities = data;
 let index = 0;
 let toBeReturned: municipality[] = [];

 for (let municipality of municipalities) 
 if (index >= (page * 100) && index < (page + 1) * 100) 
 toBeReturned.push(municipality);
 
 index++;
 
 resolve(toBeReturned)
 )
 )
 

 getPageCount = () => 
 return new Promise((resolve, reject) => 
 this.http.get("/assets/data.json").subscribe((data: municipality[]) => 
 let municipalities = data;
 let index = 0;

 for (let municipality of municipalities) 
 index++;
 

 let pageCount = Math.ceil(index / 100);
 resolve(pageCount)
 )
 )
 

There is a policy with Angular router that prevents you when you want to navigate to the same route from the one that you are currently in.
You could use RouteReuseStrategy like this:

page.component.ts:

***

constructor() 
 this.router.routeReuseStrategy.shouldReuseRoute = () => false;


***

This will allow your component to refresh after you navigate on her (from her).

Hope this helps!