How to add pagination in Angular 4 for a table?

A simple solution with ngx-pagination installed for Angular 4 can be found here. All you need is to import it to your ngModule and declare the page index in your component.ts as p: number = 1;.

Locate your pagination element under your table as shown below:

<pagination-controls (pageChange)="p = $event"></pagination-controls> 

Declare the number of row to be shown in your *ngFor //:

<tr *ngFor="let game of games | paginate: { itemsPerPage: 5, currentPage: p }; let i = index"> 

Hope it helps you!

you can check a tutorial here

and you can find the demo here

Update :- check here

UPDATE 2 :-
The above tutorial actually have this base logic:-
1). max 10 links are shown at once.
2). active like is 6th position if active page if above 5 or below 4 from last position.

pagination logic(added as a service to be able to reuse) :-

import * as _ from 'underscore'; export class PagerService { getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) { // calculate total pages let totalPages = Math.ceil(totalItems / pageSize); let startPage: number, endPage: number; if (totalPages <= 10) { // 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 <= 6) { startPage = 1; endPage = 10; } else if (currentPage + 4 >= totalPages) { startPage = totalPages - 9; endPage = totalPages; } else { startPage = currentPage - 5; endPage = currentPage + 4; } } // calculate start and end item indexes let startIndex = (currentPage - 1) * pageSize; let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1); // create an array of pages to ng-repeat in the pager control let 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 }; } } 

Component which use the pagination service :-

import { Component, OnInit } from '@angular/core'; import { Http, Headers, RequestOptions, Response } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map' import * as _ from 'underscore'; import { PagerService } from './_services/index' @Component({ moduleId: module.id, selector: 'app', templateUrl: 'app.component.html' }) export class AppComponent implements OnInit { constructor(private http: Http, private pagerService: PagerService) { } // array of all items to be paged private allItems: any[]; // pager object pager: any = {}; // paged items pagedItems: any[]; ngOnInit() { // get dummy data this.http.get('./dummy-data.json') .map((response: Response) => response.json()) .subscribe(data => { // set items to json response this.allItems = data; // initialize to page 1 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); // get current page of items this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1); } } 

The HTML Template:-

<div> <div class="container"> <div class="text-center"> <h1>Angular 2 - Pagination Example with logic like Google</h1> <!-- items being paged --> <div *ngFor="let item of pagedItems">{{item.name}}</div> <!-- pager --> <ul *ngIf="pager.pages && pager.pages.length" class="pagination"> <li [ngClass]="{disabled:pager.currentPage === 1}"> <a (click)="setPage(1)">First</a> </li> <li [ngClass]="{disabled:pager.currentPage === 1}"> <a (click)="setPage(pager.currentPage - 1)">Previous</a> </li> <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}"> <a (click)="setPage(page)">{{page}}</a> </li> <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}"> <a (click)="setPage(pager.currentPage + 1)">Next</a> </li> <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}"> <a (click)="setPage(pager.totalPages)">Last</a> </li> </ul> </div> </div> </div> 

update 3:-
A simpler approach...though i provided a single button with toggle logic which you can change it with multiple buttons

 @Component({ selector: 'my-app', template:` <div> <h5>TV ADS</h5> <ul> <li *ngFor="let item of calendarTableSelected.weeks"> <span>{{item.period}}</span> </li> </ul> </div> <div> <button (click)="update()">change</button> </div> ` }) export class SomeComponent { public calendarTable = [ { name: "TV AD1", weeks: [ { period: "2/10/2017", price: "400" }, { period: "9/10/2017", price: "800" }, { period: "16/10/2017", price: "200" }, { period: "23/10/2017", price: "500" }, { period: "30/10/2017", price: "600" }, { period: "6/11/2017", price: "800" }, { period: "13/11/2017", price: "700" }, { period: "20/11/2017", price: "800" }, { period: "27/11/2017", price: "900" }, { period: "4/12/2017", price: "400" }, { period: "11/12/2017", price: "800" }, { period: "18/12/2017", price: "200" }, { period: "25/12/2017", price: "500" }, { period: "1/1/2018", price: "600" }, { period: "8/1/2018", price: "800" }, { period: "15/1/2018", price: "700" }, { period: "22/1/2018", price: "800" }, { period: "29/1/2018", price: "900" } ] }, { name: "TV AD2", weeks: [ { period: "2/10/2017", price: "500" }, { period: "9/10/2017", price: "600" }, { period: "16/10/2017", price: "700" }, { period: "23/10/2017", price: "800" }, { period: "30/10/2017", price: "900" }, { period: "6/10/2017", price: "100" }, { period: "13/10/2017", price: "200" }, { period: "20/10/2017", price: "300" }, { period: "27/10/2017", price: "400" }, { period: "4/12/2017", price: "400" }, { period: "11/12/2017", price: "800" }, { period: "18/12/2017", price: "200" }, { period: "25/12/2017", price: "500" }, { period: "1/1/2018", price: "600" }, { period: "8/1/2018", price: "800" }, { period: "15/1/2018", price: "700" }, { period: "22/1/2018", price: "800" }, { period: "29/1/2018", price: "900" } ] }, { name: "TV AD3", weeks: [ { period: "2/10/2017", price: "500" }, { period: "9/10/2017", price: "600" }, { period: "16/10/2017", price: "700" }, { period: "23/10/2017", price: "800" }, { period: "30/10/2017", price: "900" }, { period: "6/10/2017", price: "100" }, { period: "13/10/2017", price: "200" }, { period: "20/10/2017", price: "300" }, { period: "27/10/2017", price: "400" }, { period: "4/12/2017", price: "400" }, { period: "11/12/2017", price: "800" }, { period: "18/12/2017", price: "200" }, { period: "25/12/2017", price: "500" }, { period: "1/1/2018", price: "600" }, { period: "8/1/2018", price: "800" }, { period: "15/1/2018", price: "700" }, { period: "22/1/2018", price: "800" }, { period: "29/1/2018", price: "900" } ] }, { name: "TV AD4", weeks: [ { period: "2/10/2017", price: "500" }, { period: "9/10/2017", price: "600" }, { period: "16/10/2017", price: "700" }, { period: "23/10/2017", price: "800" }, { period: "30/10/2017", price: "900" }, { period: "6/10/2017", price: "100" }, { period: "13/10/2017", price: "200" }, { period: "20/10/2017", price: "300" }, { period: "27/10/2017", price: "400" }, { period: "4/12/2017", price: "400" }, { period: "11/12/2017", price: "800" }, { period: "18/12/2017", price: "200" }, { period: "25/12/2017", price: "500" }, { period: "1/1/2018", price: "600" }, { period: "8/1/2018", price: "800" }, { period: "15/1/2018", price: "700" }, { period: "22/1/2018", price: "800" }, { period: "29/1/2018", price: "900" } ] } ] calendarTableSelected: Array; i: number= 0; constructor() { this.calendarTableSelected = this.calendarTable[0]; } update(){ if(this.i == 0){this.i = 1;}else{this.i = 0}// change this acc. to your needed logic or use any of the above provided links to form your logic this.calendarTableSelected = this.calendarTable[this.i]; } } 

plunkr as requested.

You can use Angular DataTable, if you want.

For documentation:

https://www.npmjs.com/package/angular2-datatable