New to Kendo UI for AngularStart a free 30-day trial

PagerTemplateDirective

Represents the pager template which helps 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.
ts

@Component({
    selector: 'my-app',
    template: `
      <kendo-pager [total]="total" [pageSize]="pageSize" [skip]="skip" (pageChange)="onPageChange($event)">
          <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
              <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
              <kendo-pager-numeric-buttons [buttonCount]="10"></kendo-pager-numeric-buttons>
              <kendo-pager-next-buttons></kendo-pager-next-buttons>
              <kendo-pager-info></kendo-pager-info>
              Current page: {{currentPage}}
          </ng-template>
       </kendo-pager>
    `
})

class AppComponent {
    public skip = 0;
    public pageSize = 10;
    public total = 100;

    public onPageChange(e: any): void {
        this.skip = e.skip;
        this.pageSize = e.take;
    }
}

Selector

[kendoDataPagerTemplate], [kendoPagerTemplate]

In this article
Selector
Not finding the help you need?
Contact Support