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 custom components and the built-in pager elements. For more information on how to define the Pager template, refer to the PagerTemplateDirective API documentation.

Using the Pager template disables its default responsive behavior.

The following example demonstrates how to use the Pager template.

Example
View Source
Edit In Stackblitz  
Change Theme:

Built-in Pager Elements

The Pager provides the following built-in elements:

Available Context Fields

The template context exposes the following fields:

  • currentPageThe index of the displayed page.
  • pageSizeThe value of the current pageSize.
  • skipThe current skip value.
  • totalThe total number of records.
  • totalPagesThe total number of available pages.