import { Component , ChangeDetectionStrategy , OnChanges , Input , Output , EventEmitter } from '@angular/core' ; @ Component ( { selector : 'pager' , styleUrls : [ './pager.scss' ] , templateUrl : './pager.html' , changeDetection : ChangeDetectionStrategy . OnPush } ) export class PagerComponent implements OnChanges { @ Input ( ) total = 0 ; @ Input ( ) pageSize = 10 ; @ Input ( ) pageIndex = 1 ; @ Output ( ) pageChange = new EventEmitter ( ) ; prev ( ) { if ( this . hasPrev ( ) ) { this . pageChange . emit ( -- this . pageIndex ) ; } } next ( ) { if ( this . hasNext ( ) ) { this . pageChange . emit ( ++ this . pageIndex ) ; } } hasPrev ( ) { return this . pageIndex > 1 ; } hasNext ( ) { return this . pageIndex < this . totalPage ( ) ; } totalPage ( ) { return Math . ceil ( this . total / this . pageSize ) ; } ngOnChanges ( ) { this . pageIndex = Math . max ( Math . min ( this . pageIndex , this . totalPage ( ) ) , 1 ) ; } }