Pager Template

To customize the pager appearance, use the PagerTemplateDirective.

The directive enables you to take full control over the content of the Pager by mixing the built-in pager elements and custom components.

Using the Pager template disables its default responsive behavior.

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.

Using Built-in Pager Components

You can customize the Pager by using the following built-in components:

• PagerNumericButtonsComponent—Displays numeric buttons for navigation between the pages.
• PagerInputComponent—Displays an input element that allows typing and rendering of page numbers.
• PagerPageSizesComponent—Displays a drop-down list for the page size selection.
• PagerInfoComponent—Shows information about the current page and the total number of records.
• PagerPrevButtonsComponent—Displays buttons for navigating to the first and previous page.
• PagerNextButtonsComponent—Displays buttons for navigating to the next and the last page.

The following example demonstrates how to define the built-in pager components inside an <ng-template> tag with applied kendoDataPagerTemplate directive.

Using Other Components

In some scenarios, the built-in pager elements do not entirely meet your requirements. In such cases, the PagerTemplateDirective enables you to use any set of Angular components and DOM elements that fit the specific use case.

The following example demonstrates how to use the Kendo UI for Angular Slider to paginate the data.

Suggested Links

• API Reference of the Pager
• API Reference of the PagerTemplateDirective