How can I create a pagination component in Angular 4? -

i have api endpoint /list/students?page=5&rows=10 pagination parameters page , size. want create angular2 pagination component.

input parameters

• page
• size

in addition, want go specific page , size arrow buttons.

how can implement component ?

you can crate paging component using below codes , services

app.component.html

<paging-component   [totalitems]="pagination.totalitems"   [currentpage]="pagination.currentpage"   [pagesize]="pagination.pagesize"   [totalpagelinkbuttons]="pagination.totalpagelinkbuttons"   [rowsperpageoptions]="pagination.rowsperpageoptions"   (onpagechange)="mychanges($event)"></paging-component> 

app.component.ts below;

import {component} '@angular/core';  @component({   selector   : 'app-root',   templateurl: './app.component.html',   styleurls  : ['./app.component.css'] }) export class appcomponent {    pagination = {     totalitems: 100,     currentpage: 1,     pagesize: 10,     totalpagelinkbuttons: 5,     rowsperpageoptions: [10, 20, 30, 50, 100]   };    /* paging component metod */   mychanges(event) {     this.pagination.currentpage = event.currentpage;     this.pagination.totalitems = event.totalitems;     this.pagination.pagesize = event.pagesize;     this.pagination.totalpagelinkbuttons = event.totalpagelinkbuttons;   } } 

app.component.module

import {browsermodule} '@angular/platform-browser'; import {ngmodule} '@angular/core'; import {formsmodule} '@angular/forms'; import {httpmodule} '@angular/http';  import {appcomponent} './app.component'; import {pagingcomponent} './components/paging-component/paging-component.component'; import {pagingservice} './service/paging-service.service';  @ngmodule({   declarations: [     appcomponent,     pagingcomponent   ],   imports: [     browsermodule,     formsmodule,     httpmodule   ],   providers: [ pagingservice],   bootstrap: [appcomponent] }) export class appmodule { } 

paging-service.service.ts

import { injectable } '@angular/core';  @injectable() export class pagingservice {     /**    * @param totalitems : total items listed    * @param currentpage : current page number ( pages starting 1 not 0)    * @param pagesize : number of items in page    * @param totalpagelinkbuttons : number of total page link buttons    * @returns {{    * startpage: number,    * endpage: number,    * startindex: number,    * endindex: number,    * totalpagelinkbuttons: number,    * totalitems: number,    * currentpage: number,    * pagesize: number,    * totalpages: number,    * pages: (observable<number>|any)    * }}    */   getpagingserviceitems(totalitems: number, currentpage: number = 1, pagesize: number = 10, totalpagelinkbuttons: number = 5) {      totalitems = totalitems || 1;      /* if currentpage not exists default value '1' */     currentpage = currentpage || 1;      /* default value of number of items in page 10 if not exist */     pagesize = pagesize || 10;      /* default value of number of total page link buttons 10 if not exist */     totalpagelinkbuttons = totalpagelinkbuttons || 10;      /* calculate total pages  */     const totalpages = math.ceil(totalitems / pagesize);       let startpage: number; // start page button number     let endpage: number;   // end page button number      if (totalpages <= totalpagelinkbuttons) {        // less totalpagebuttons show       // 1,2,3,.., totalpages buttons       startpage = 1;       endpage = totalpages;     } else {       // more totalpagebuttons calculate start , end pages       // currentpage on center of paging        if (currentpage <= math.ceil(totalpagelinkbuttons / 2)) {         startpage = 1;         endpage = totalpagelinkbuttons;       } else if (currentpage + math.ceil(totalpagelinkbuttons / 2) > totalpages) {         startpage = totalpages - totalpagelinkbuttons + 1;         endpage = totalpages;       } else {         startpage = currentpage - math.ceil(totalpagelinkbuttons / 2) + 1;         endpage = startpage + totalpagelinkbuttons - 1;       }     }      // calculate start , end item indexes     // indexes started 0 ! important      const startindex = (currentpage - 1) * pagesize;     const endindex = math.min(startindex + pagesize - 1, totalitems - 1);      const pages = [];     // create array of pages ng-repeat in pager control     ( let = startpage; <= endpage ; i++) {       pages.push(i);     }      // return object paging properties required view     return {       startpage           : startpage,       endpage             : endpage,       startindex          : startindex,       endindex            : endindex,       totalpagelinkbuttons: totalpagelinkbuttons,       totalitems          : totalitems,       currentpage         : currentpage,       pagesize            : pagesize,       totalpages          : totalpages,       pages               : pages     };   }   }