New to Kendo UI for Angular? Start 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 currentpageSize
.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]