New to Kendo UI for Angular? Start a free 30-day trial

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:

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

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme: