Getting Started with Kendo UI for Angular Pager

The Pager component enables splitting a set of data into pages with flexible and intuitive UI.

Basic Usage

The following example demonstrates the Pager component in action.

  1. Set the pageSize, skip, and total options.
  2. Handle the pageChange event.
  3. Manually paginate the data.
import { PageChangeEvent } from '@progress/kendo-angular-pager';
import { Component, OnInit } from '@angular/core';
import { destinations } from './destinations';

@Component({
    selector: 'my-app',
    template: `
        <span class="title">
            Top European Destinations
        </span>
        <div class="wrapper">
            <div class="content-container">
                <destination-component
                    *ngFor="let destination of pagedDestinations"
                    [data]="destination">
                </destination-component>
            </div>
            <kendo-datapager
                [style.width.%]="100"
                [pageSize]="pageSize"
                [skip]="skip"
                [total]="total"
                (pageChange)="onPageChange($event)">
            </kendo-datapager>
        </div>
    `,
    styleUrls: ['styles.css']
})
export class AppComponent implements OnInit {
    public pageSize = 8;
    public skip = 0;
    public pagedDestinations = [];
    public total = destinations.length;

    public ngOnInit(): void {
        this.pageData();
    }

    public onPageChange(e: PageChangeEvent): void {
        this.skip = e.skip;
        this.pageSize = e.take;
        this.pageData();
    }

    private pageData(): void {
        this.pagedDestinations = destinations.slice(this.skip, this.skip + this.pageSize);
    }
}
import { Component, Input } from '@angular/core';

@Component({
    selector: 'destination-component',
    template: `
        <div class="destination">
            <img src="https://www.telerik.com/kendo-angular-ui-develop/components/pager/assets/destinations/{{data.destinationId}}.png"
                alt="{{data.destinationName}}" />
            <h3>{{data.destinationName}}</h3>
            <p>{{data.destinationText}}</p>
        </div>
    `,
    styles: [`
        .destination {
            position: relative;
            width: 170px;
            height: 230px;
            margin-left: 10px;
            padding: 0;
            cursor: default;
            cursor: default;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .destination img {
            width: 160px;
            height: 150px;
            margin-bottom: 10px;
        }
        .destination h3 {
            margin: 0;
            padding: 3px 5px 0 0;
            max-width: 100%;
            overflow: hidden;
            line-height: 1.1em;
            font-size: .9em;
            font-weight: bolder;
            text-transform: uppercase;
            color: #656565;
        }
        .destination p {
            width: 100%;
            font-size: 0.8em;
            color: #BABABA;
        }
    `]
})

export class DestinationComponent {
    @Input() public data: any;
}
// tslint:disable
export const destinations = [{
    destinationId: 1,
    destinationName: `BRUSSELS, BELGIUM`,
    destinationText: `Chocolate, beer, music and surrealism.`
}, {
    destinationId: 2,
    destinationName: `PORTO, PORTUGAL`,
    destinationText: `Taste it, drink it, eat it, love it. Bem-vindo ao Porto!`
}, {
    destinationId: 3,
    destinationName: `MALAGA, SPAIN`,
    destinationText: `Enjoy the perfect climat.`
}, {
    destinationId: 4,
    destinationName: `BUDAPEST, HUNGARY`,
    destinationText: `One of the most exciting cities in the world.`
}, {
    destinationId: 5,
    destinationName: `BRATISLAVA, SLOVAKIA`,
    destinationText: `A modern city on the Danube.`
}, {
    destinationId: 6,
    destinationName: `FLORENCE, ITALY`,
    destinationText: `Love and culture are everywhere!`
}, {
    destinationId: 7,
    destinationName: `POZNAN, POLAND`,
    destinationText: `A unique heritage with rich cultural offer.`
}, {
    destinationId: 8,
    destinationName: `ATHENS, GREECE`,
    destinationText: `The biggest open-air museum in Europe.`
}, {
    destinationId: 9,
    destinationName: `SOFIA, BULGARIA`,
    destinationText: `One of Europe's oldest cities.`
}, {
    destinationId: 10,
    destinationName: `BORDEAUX, FRANCE`,
    destinationText: `Discover exciting new facets of its character.`
}, {
    destinationId: 11,
    destinationName: `GENEVA, SWITZERLAND`,
    destinationText: `One of the most welcoming cities in Europe.`
}, {
    destinationId: 12,
    destinationName: `RIGA, LATVIA`,
    destinationText: `At the crossroads of various nations and cultures.`
}, {
    destinationId: 13,
    destinationName: `SEVILLE, SPAIN`,
    destinationText: `Seville. Any time of year…`
}, {
    destinationId: 14,
    destinationName: `COLMAR, FRANCE`,
    destinationText: `A condensed version of the Alsace region.`
}, {
    destinationId: 15,
    destinationName: `VIENNA, AUSTRIA`,
    destinationText: `The Giant Ferris Wheel is awaiting you.`
}, {
    destinationId: 16,
    destinationName: `MONTPELLIER, FRANCE`,
    destinationText: `Smart, Mediterranean, attractive, welcoming and festive.`
}, {
    destinationId: 17,
    destinationName: `VALENCIA, SPAIN`,
    destinationText: `Sun, culture, history and future. `
}, {
    destinationId: 18,
    destinationName: `BARCELONA, SPAIN`,
    destinationText: `Barcelona never sleeps.`
}, {
    destinationId: 19,
    destinationName: `MILAN, ITALY`,
    destinationText: `The hub of Italian culture`
}, {
    destinationId: 20,
    destinationName: `GDANSK, POLAND`,
    destinationText: `You'll be amazed by the beauty of Gdansk.`
}, {
    destinationId: 21,
    destinationName: `ROME, ITALY`,
    destinationText: `Treat yourself to a stay in the Eternal City.`
}, {
    destinationId: 22,
    destinationName: `EDINBURGH, SCOTLAND`,
    destinationText: `Shopping, dining & architectural splendour.`
}, {
    destinationId: 23,
    destinationName: `LISBON, PORTUGAL`,
    destinationText: `The pure pleasure of being in one of the best cities in the world.`
}];
.content-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: auto;
    height: 470px;
}

.wrapper {
    text-align: center;
}

.demo-wrapper {
    width: 100%;
    overflow-x: auto;
}

.checkbox-wrapper label {
    display: inline-block;
    margin-right: 20px;
}

.title {
    text-transform: uppercase;
    color: #A1A0A1;
    line-height: 50px;
    margin-left: 10px;
}

.contacts-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contacts-container{
    width:500px;
    height: 211px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    border-style: none solid;
    border-color: #ECEBEB;
    border-width: thin;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.articles-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 770px;
}

.articles-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 770px;
    height: 340px;
    overflow: auto;
    border-style: none solid;
    border-color: #ECEBEB;
    border-width: thin;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.articles-title {
    text-transform: uppercase;
    color: #A1A0A1;
    line-height: 50px;
    padding-left: 18px;
    border: 1px solid #ECEBEB;
    display: inline-block; width: 100%;
}
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PagerModule } from '@progress/kendo-angular-pager';
import { AppComponent } from './app.component';
import { DestinationComponent } from './destination.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent, DestinationComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, PagerModule, FormsModule]
})
export class AppModule {}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

Installation

Either use the quick setup (Angular CLI v6 or later) or manually add the package.

Quick Setup with Angular CLI v6 or Later

Angular CLI v6 supports the addition of packages through the ng add command which executes in one step the set of otherwise individually needed commands.

ng add @progress/kendo-angular-pager

Manual Setup

All components that you reference during the installation will be present in the final bundle of your application.

  1. Download and install the package.

    npm install --save @progress/kendo-angular-pager @progress/kendo-angular-l10n @progress/kendo-angular-common @progress/kendo-angular-inputs @progress/kendo-angular-dropdowns
  2. Once installed, import the NgModule of the components you need.

    To get all package components, import the PagerModule in your application root or feature module.

    import { NgModule } from '@angular/core';
       import { BrowserModule } from '@angular/platform-browser';
       import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
       import { PagerModule } from '@progress/kendo-angular-pager';
       import { AppComponent } from './app.component';
    
       @NgModule({
           bootstrap:    [AppComponent],
           declarations: [AppComponent],
           imports:      [BrowserModule, BrowserAnimationsModule, PagerModule]
       })
       export class AppModule {
       }
  3. You are required to install one of the Kendo UI themes for Angular to style your components. For more information on how to add the styles, refer to the section on styling.

Dependencies

The Pager package requires you to install the following peer dependencies in your application:

  • @angular/common
  • @angular/core
  • @progress/kendo-angular-common
  • @progress/kendo-angular-l10n
  • @progress/kendo-angular-inputs
  • @progress/kendo-angular-dropdowns
  • rxjs

Functionality and Features

The Pager package utilizes the Angular animation system, which supports a specific set of browsers.

In this article