simple paginator works

src/app/list-page/list-page.component.ts

@@ -14,7 +14,7 @@ export class ListPageComponent implements OnInit {
   ngOnInit(): void {
     this.route.queryParams
       .subscribe((params) => {
-        this.page = params.page || 1
+        this.page = +(params.page || 1);
-      })
+      });
   }
 }

src/app/list-paginate/list-paginate.component.html

@@ -1 +1,6 @@
-{{ page }} / {{ pages }}
+
+<a (click)="navigate(page - 1)"><</a>
+<a *ngFor="let npage of pageNums" (click)="navigate(npage)" [ngClass]="{ 'active': page == npage }">
+  {{npage}}
+</a>
+<a (click)="navigate(page + 1)">></a>

src/app/list-paginate/list-paginate.component.ts

@@ -1,20 +1,26 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-list-paginate',
   templateUrl: './list-paginate.component.html',
   styleUrls: ['./list-paginate.component.styl']
 })
-export class ListPaginateComponent implements OnInit {
+export class ListPaginateComponent {
   @Input()
   page: number;
 
   @Input()
   pages: number;
 
-  constructor() { }
+  constructor(private router: Router) { }
 
-  ngOnInit(): void {
+  public get pageNums(): number[] {
+    const starti = Math.min(Math.max(this.page - 2, 1), this.pages - 4);
+    return [...Array(5)].map((p, i) => starti + i);
   }
 
+  public navigate(num: number): void {
+    this.router.navigate(['/list'], { queryParams: { page: Math.min(Math.max(num, 1), this.pages) }});
+  }
 }

src/app/list.service.ts

@@ -7,12 +7,12 @@ import { IAPIResponse } from './api-response'
   providedIn: 'root'
 })
 export class ListService {
-  private listUrl = 'http://midaiganes.irw.ee/api/list'
+  private listUrl = 'http://midaiganes.irw.ee/api/list';
 
   constructor(private http: HttpClient) { }
 
   public getList(limit: number = 10, offset: number = 0): Observable<IAPIResponse> {
-    const url = `${this.listUrl}?offset=${offset}&limit=${limit}`
+    const url = `${this.listUrl}?offset=${offset}&limit=${limit}`;
-    return this.http.get<IAPIResponse>(url)
+    return this.http.get<IAPIResponse>(url);
   }
 }

src/app/list/list.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core';
 import { ListService } from '../list.service'
 
 import { IPerson } from '../person'
@@ -9,7 +9,7 @@ import { IAPIResponse } from '../api-response'
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.styl']
 })
-export class ListComponent implements OnInit {
+export class ListComponent implements OnInit, OnChanges {
   public people: IPerson[];
   private selected: IPerson;
 
@@ -23,17 +23,24 @@ export class ListComponent implements OnInit {
 
   constructor(private listService: ListService) { }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.page) {
+      this.getList();
+    }
+  }
+
   ngOnInit(): void {
-    this.getList()
+    this.getList();
   }
 
   private getList(): void {
-    this.listService.getList().subscribe(
+    const offset = this.perPage * this.page;
+    this.listService.getList(this.perPage, offset).subscribe(
       (data) => this.updateList(data));
   }
 
   private updateList(data: IAPIResponse): void {
-    this.people = data.list
+    this.people = data.list;
     // this.pages = data.stats.total / this.perPage
   }