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.
Starting with
v17.0.0, the Pager selectors have been updated to improve clarity and consistency. The following breaking changes affect the pager template:
Deprecated Selector Updated Selector kendoDataPagerTemplatekendoPagerTemplatekendo-datapager-pager-prev-buttonskendo-pager-prev-buttonskendo-datapager-pager-numeric-buttonskendo-pager-numeric-buttonskendo-datapager-pager-next-buttonskendo-pager-next-buttonskendo-datapager-pager-inputkendo-pager-inputkendo-datapager-pager-infokendo-pager-infokendo-datapager-pager-page-sizeskendo-pager-page-sizeskendo-datapager-pager-spacerkendo-pager-spacer
The template context exposes the following fields:
currentPage—The index of the displayed page.pageSize—The value of the currentpageSize.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.
Using the Pager template disables its default responsive behavior.
The following example demonstrates how to define the built-in pager components inside an <ng-template> tag with applied kendoPagerTemplate 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.