# Pager Template

To customize the pager appearance, use the [`PagerTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/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`](https://www.telerik.com/kendo-angular-ui/components/changelogs/kendo-angular-ui#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              |
> | --------------------------------------- | ----------------------------- |
> | `kendoDataPagerTemplate`                | `kendoPagerTemplate`          |
> | `kendo-datapager-pager-prev-buttons`    | `kendo-pager-prev-buttons`    |
> | `kendo-datapager-pager-numeric-buttons` | `kendo-pager-numeric-buttons` |
> | `kendo-datapager-pager-next-buttons`    | `kendo-pager-next-buttons`    |
> | `kendo-datapager-pager-input`           | `kendo-pager-input`           |
> | `kendo-datapager-pager-info`            | `kendo-pager-info`            |
> | `kendo-datapager-pager-page-sizes`      | `kendo-pager-page-sizes`      |
> | `kendo-datapager-pager-spacer`          | `kendo-pager-spacer`          |

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`](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagernumericbuttonscomponent)—Displays numeric buttons for navigation between the pages.
* [`PagerInputComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagerinputcomponent)—Displays an input element that allows typing and rendering of page numbers.
* [`PagerPageSizesComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagerpagesizescomponent)—Displays a drop-down list for the page size selection.
* [`PagerInfoComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagerinfocomponent)—Shows information about the current page and the total number of records.
* [`PagerPrevButtonsComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagerprevbuttonscomponent)—Displays buttons for navigating to the first and previous page.
* [`PagerNextButtonsComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagernextbuttonscomponent)—Displays buttons for navigating to the next and the last page.

> Using the Pager template disables its [default responsive behavior](https://www.telerik.com/kendo-angular-ui-develop/components/pager/responsive).

The following example demonstrates how to define the built-in pager components inside an `<ng-template>` tag with applied [`kendoPagerTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagertemplatedirective) directive.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pager/template/api/source.txt)

## Using Other Components

In some scenarios, the built-in pager elements do not entirely meet your requirements. In such cases, the [`PagerTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/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](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/slider) to paginate the data.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pager/template/source.txt)

## Suggested Links

* [API Reference of the Pager](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagercomponent)
* [API Reference of the PagerTemplateDirective](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagertemplatedirective)