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


Represents the pager template which helps to customize the pager appearance in the Grid. To define a pager template, nest an <ng-template> tag with the kendoPagerTemplate directive inside <kendo-grid>.

The template context provides 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.
  • Needs to be provided as an input to inner pager components used within the template when the Grid is navigable.

    selector: 'my-app',
    template: `
      <kendo-grid-column field="ProductID" title="ID" width="40">
      <kendo-grid-column field="ProductName" title="Name" width="250">
      <kendo-grid-column field="UnitPrice" title="Price" width="80" format="{0:c}">

      <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
         <kendo-pager-numeric-buttons [buttonCount]="10"></kendo-pager-numeric-buttons>
         Current page: {{currentPage}}


class AppComponent {
    public gridData = [{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": false
      }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": true



In this article

Not finding the help you need?