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

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 {
  @Input()
  page: number;

  @Input()
  pages: number;

  constructor(private router: Router) { }

  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) }});
  }
}