Pager Template

To customize the pager appearance, use the PagerTemplateDirective. The option enables you to take full control over the content of the pager by mixing custom components and the built-in pager elements. For more information on how to define the pager template, refer to the PagerTemplateDirective API documentation.

When the Pager template is defined, the default responsive behavior is disabled.

The following example demonstrates how to use the Pager template.

import { PageChangeEvent } from '@progress/kendo-angular-pager';
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-datapager style="width: 100%;" [pageSize]="pageSize" [skip]="skip" [total]="total" (pageChange)="onPageChange($event)">
            <ng-template kendoDataPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
                <kendo-datapager-prev-buttons style="margin-right: 10px;"></kendo-datapager-prev-buttons>
                <kendo-slider
                    [showButtons]="false"
                    tickPlacement="none"
                    [max]="totalPages"
                    [min]="1"
                    (valueChange)="sliderChange($event)"
                    [value]="currentPage">
                </kendo-slider>
                <kendo-datapager-next-buttons style="margin-left: 10px;"></kendo-datapager-next-buttons>
                Page {{currentPage}} of {{totalPages}}
                <kendo-datapager-info></kendo-datapager-info>
            </ng-template>
        </kendo-datapager>
    `
})
export class AppComponent {
    public pageSize = 10;
    public skip = 0;
    public total = 100;

    public sliderChange(pageIndex: number): void {
        this.skip = (pageIndex - 1) * this.pageSize;
    }

    public onPageChange(e: PageChangeEvent): void {
        this.skip = e.skip;
        this.pageSize = e.take;
    }
}
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 { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

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

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

Built-in Pager elements

The available built-in Pager elements are:

Available Context Fields

The template context exposes the following fields:

  • currentPage—The index of the displayed page.
  • pageSize—The value of the current pageSize.
  • skip—The current skip value.
  • total—The total number of records.
  • totalPages—The total number of available pages.

In this article