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

PagerTemplateDirective

Directive

Represents the Kendo UI Pager template directive for Angular. Use this directive to customize the Pager appearance. To define a Pager template, nest an <ng-template> tag with the kendoPagerTemplate directive inside <kendo-pager>.

The template context provides 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.

Definition

Package:@progress/kendo-angular-pager

Selector:[kendoDataPagerTemplate], [kendoPagerTemplate]

Syntax:

html

<kendo-pager [skip]="0" [pageSize]="10" [total]="100">
  <ng-template kendoPagerTemplate let-currentPage="currentPage" let-pageSize="pageSize" let-skip="skip" let-total="total" let-totalPages="totalPages">
    <span>Page {{currentPage}} of {{totalPages}}</span>
    <span>Items per page: {{pageSize}}</span>
  </ng-template>
</kendo-pager>