Angular 2 Pagination

Angular 2 pagination allows us to add paging features to our angular 2 project.

angular 2 pagination example
angular 2 pagination example

live example and resources at the end of the article

try angular 2 pagination
try angular 2 pagination

We can add a pager if we want too, a pager is a next previous component without numbers.

build an Angular 2 pagination
build an Angular 2 pagination

Let’s build an Angular 2 pagination example.

Include bootstrap before we start (it’s easy : ) )

<link href=”” rel=”stylesheet”>

main app code source :

 * Created by Tareq Boulakjar. from
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {Pagination} from './pagination.component';
import {Pager} from './pager.component';
/*Angular 2 Pagination Example*/
    selector: 'my-app',
                <div class="row">

                    <h4>Angular 2 Pagination Example</h4> <br>
                    <span class="text-danger"> The selected page<span class="badge">{{currentSelectedPage}}</span> </span> <br>
                    <span class="text-danger"> Totoal items per page<span class="badge">{{currentItemsPerPage}}</span> </span> <br>

                    <div class="form-group">
                    <img [src]="slides[currentPage-1].image" style="margin:auto;">
                    <div class="form-group">
                    <pagination [boundaryLinks]="true" [totalItems]="totalResults"
                                [(ngModel)]="currentPage" (pageChanged)="currentPageChanged($event)"
                    <button type="button" class="btn btn-info" (click)="setCurrentPage(2)">Set the current page <span class="badge">to: 2</span></button> <br>

                    <div class="form-group" style="float: left">
                    <h4>Angular 2 Pager Example</h4>
                    <pager [totalItems]="totalResults" [(ngModel)]="currentPage" onPageChanged="currentPageChanged($event)"></pager>


    directives: [Pagination, Pager, FORM_DIRECTIVES, CORE_DIRECTIVES],
export class Angular2Pagination  {
    //this array contains the image we will show for each page
    private slides:Array<any> = [];
    //print to the user the selected page
    //print to the user the total iterms per page
    //the maximum buttons to show
    private maxSize:number = 3;
    //the number of pages you want to print
    private totalResults:number = 60;
    //the current page
    private currentPage:number = 2;

    constructor () {
            {image:'',text:'BMW 1'},
            {image:'',text:'BMW 2'},
            {image:'',text:'BMW 3'},
            {image:'',text:'BMW 4'},
            {image:'',text:'BMW 5'},
            {image:'',text:'BMW 6'}

    private setCurrentPage(pageNo:number):void {
        this.currentPage = pageNo;

    private currentPageChanged(event:any):void {
        this.currentSelectedPage = ' is : ' +;
        this.currentItemsPerPage = ' is : ' +  event.itemsPerPage;


Angular 2 pagination component is very useful.

Our example uses Typescript as programming language.


Download all files from here:angular-2-pagination