Angular2 Component: Pagination (optionally uses semantic-ui)

pagination.ts

import {Component, Input, Output, AfterViewInit, EventEmitter, NgZone, Self} from '@angular/core';
import {NgClass} from '@angular/common';
import {ControlValueAccessor, NgModel} from '@angular/common';

@Component({
  selector: 'pagination',
  template: `<div class="ui borderless menu" *ngIf="numberOfPages > 1">
  <a class="item" (click)="selectPage(1)" [ngClass]="{active: selectedPage==1}">{{1}}</a>
  <a class="item disabled" *ngIf="numberOfPages > 10 && selectedPage > 5">...</a>
  <a class="item" *ngFor="let page of pages" (click)="selectPage(page)" [ngClass]="{active: selectedPage==page}">{{page}}</a>
  <a class="item disabled" *ngIf="numberOfPages > 10 && selectedPage < numberOfPages-5">...</a>
  <a class="item" (click)="selectPage(numberOfPages)" [ngClass]="{active: selectedPage==numberOfPages}">{{numberOfPages}}</a>
</div>`,
  directives: [NgClass],
  providers: [NgModel]
})
export class PaginationComponent implements AfterViewInit, ControlValueAccessor {

  private _total: number;
  private _limit: number;

  @Input()
  public get total(): number {
    return this._total;
  }
  public set total(value: number){
    this._total = value;
    this.updatePages();
  }

  @Input()
  public get limit(): number{
    return this._limit;
  }
  public set limit(value: number){
    this._limit = value;
  }
  @Output() pageSelect: EventEmitter<number> = new EventEmitter<number>();
  @Output() totalPages: EventEmitter<number> = new EventEmitter<number>();

  private numberOfPages: number;
  private pages: any[] = [];
  private selectedPage: number = 1;
  public onChange: any = Function.prototype;
  public onTouched: any = Function.prototype;
  constructor(@Self() private self: NgModel, private ngZone: NgZone){
    this.self.valueAccessor = this;
  }

  ngAfterViewInit(): void {
    this.updatePages();
  }

  updatePages(): void {
    this.numberOfPages = Math.ceil(this._total / this.limit);
    this.pages = [];
    if(this.numberOfPages > 9){
      let start = this.selectedPage > 5? this.selectedPage - 2 : this.selectedPage - 3;
      while(start <= 1) start++;
      while(start+5 >= this.numberOfPages) start--;
      for(let x=0; x < 6; x++){
        this.pages.push(start+x);
      }
      let x: number = start + 7;
      let y: number = this.selectedPage + 5;
      if((x == this.numberOfPages) && (y == this.numberOfPages)) this.pages.push(start+6);
    } else for(let x = 1; x <= this.numberOfPages; x++) if(x !== 1 && x !== this.numberOfPages) this.pages.push(x);
  }

  selectPage(page: number): void  {
    if(page===this.selectedPage) return;
    this.selectedPage = page;
    this.updatePages();
    this.pageSelect.emit(page);
    this.self.viewToModelUpdate(page);
  }

  writeValue (value: number): void {
    if (value === this.selectedPage) {
      return;
    }
    this.selectedPage = +value;
  }

  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

Hi Ibby,

Which license applies to this gist?