Angular 4 pagination

pager.component.html

<!-- pager -->
<div *ngIf="pager.pages && pager.pages.length" class="ui right floated pagination menu">
  <a [ngClass]="{disabled:pager.currentPage === 1}" (click)="setPage(1)" class="icon item">
    <i class="angle double left icon"></i>
  </a>
  <div *ngIf="pager.startPage > 1" class="disabled item">...</div>
  <a [ngClass]="{disabled:pager.currentPage === 1}" (click)="setPage(pager.currentPage - 1)" class="icon item">
    <i class="angle left icon"></i>
  </a>
  <a *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}" (click)="setPage(page)"
     class="item">{{page}}</a>
  <a [ngClass]="{disabled:pager.currentPage === pager.totalPages}" (click)="setPage(pager.currentPage + 1)"
     class="icon item">
    <i class="angle right icon"></i>
  </a>
  <div *ngIf="pager.endPage < pager.totalPages" class="disabled item">...</div>
  <a [ngClass]="{disabled:pager.currentPage === pager.totalPages}" (click)="setPage(pager.totalPages)"
     class="icon item">
    <i class="angle double right icon"></i>
  </a>
</div>

pager.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { PagerService } from './pager.service';

// import { PagerService } from './pager.service';

@Component({
  selector: 'kira-pager',
  providers: [PagerService],
  templateUrl: './pager.component.html',
})

// <kira-pager [allItems]="allItems" (pageChange)="onPageChange($event)"></kira-pager>

export class PagerComponent implements OnInit {

  // pager object
  pager: any = {};

  // paged items
  @Output() pageChange: EventEmitter<any[]> = new EventEmitter<any[]>();

  // array of all items to be paged
  @Input() allItems: any[];

  // number of items per page
  @Input() pageSize: number;

  constructor(private pagerService: PagerService) {
  }

  ngOnInit() {
    this.setPage(1);
  }

  setPage(page: number) {

    if (page < 1 || page > this.pager.totalPages) return;

    // get pager object from service
    this.pager = this.pagerService.getPager(this.allItems.length, page, this.pageSize);

    // get current page of items
    setTimeout(() => this.pageChange
        .emit(this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1)),
      0);
  }
}

pager.service.ts

import * as _ from 'underscore';
import { Injectable } from '@angular/core';

@Injectable()
export class PagerService {
  getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
    // calculate total pages
    const totalPages = Math.ceil(totalItems / pageSize);

    let startPage: number, endPage: number;
    if (totalPages <= 5) {
      // less than 10 total pages so show all
      startPage = 1;
      endPage = totalPages;
    } else {
      // more than 10 total pages so calculate start and end pages
      if (currentPage <= 3) {
        startPage = 1;
        endPage = 5;
      } else if (currentPage + 3 >= totalPages) {
        startPage = totalPages - 4;
        endPage = totalPages;
      } else {
        startPage = currentPage - 2;
        endPage = currentPage + 2;
      }
    }

    // calculate start and end item indexes
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

    // create an array of pages to ng-repeat in the pager control
    const pages = _.range(startPage, endPage + 1);

    // return object with all pager properties required by the view
    return {
      totalItems: totalItems,
      currentPage: currentPage,
      pageSize: pageSize,
      totalPages: totalPages,
      startPage: startPage,
      endPage: endPage,
      startIndex: startIndex,
      endIndex: endIndex,
      pages: pages
    };
  }
}