@neoprospecta/angular-data-box/inline-src/paginator.component.ts

Data table with REST implementation.

import { Component, Output, Input, EventEmitter, DoCheck } from '@angular/core';

@Component({
  selector: 'np-paginator',
  styles: [".pagination{float:right} "],
  template: "<div class=\"pagination\"> <span>{{getCurrentPages()}} de {{totalItems}}</span> <button md-icon-button (click)=\"emitPageChange('left')\" [disabled]=\"currentPage === 1\"> <md-icon fontSet=\"fa\" fontIcon=\"fa-angle-left\" color=\"primary\"></md-icon> </button> <button md-icon-button (click)=\"emitPageChange('right')\" [disabled]=\"currentPage === totalOfPagesRoundedUp\"> <md-icon fontSet=\"fa\" fontIcon=\"fa-angle-right\" color=\"primary\"></md-icon> </button> </div> "
})
export class Paginator implements DoCheck {

  @Input() totalItems: number;
  @Input() currentPage: number;
  @Input() amountPerPage: number;
  @Output() pageChanged = new EventEmitter<any>();

  totalOfPagesRoundedUp: number;
  totalOfPagesRoundedDown: number;

  constructor() { }

  ngDoCheck() {
    this.totalOfPagesRoundedUp = Math.ceil(this.totalItems / this.amountPerPage); // arredonda pra cima
    this.totalOfPagesRoundedDown = Math.floor(this.totalItems / this.amountPerPage); // arredonda pra baixo
  }

  emitPageChange(direction: string) {
    this.pageChanged.emit({ event: direction })
  }

  getCurrentPages() {
    if (this.totalItems === 0){
      return '0';
    }
    return this.getFirstPageIndex() + ' - ' + this.getLastPageIndex();
  }

  getFirstPageIndex() {
    return ((this.currentPage - 1) * this.amountPerPage) + 1;
  }

  getLastPageIndex() {
    if ((this.currentPage === this.totalOfPagesRoundedUp) && (this.totalOfPagesRoundedDown < this.totalOfPagesRoundedUp)) { // last page and not full items
      return this.totalItems;
    } else {
      return (this.currentPage * this.amountPerPage);
    }
  }
}