PagerTemplateDirective
Represents the pager template which helps to customize the pager appearance. To define a pager
template, nest an <ng-template>
tag with the kendoDataPagerTemplate
directive inside <kendo-datapager>
.
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.
@Component({
selector: 'my-app',
template: `
<kendo-datapager [total]="total" [pageSize]="pageSize" [skip]="skip" (pageChange)="onPageChange($event)">
<ng-template kendoDataPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
<kendo-datapager-prev-buttons></kendo-datapager-prev-buttons>
<kendo-datapager-numeric-buttons [buttonCount]="10"></kendo-datapager-numeric-buttons>
<kendo-datapager-next-buttons></kendo-datapager-next-buttons>
<kendo-datapager-info></kendo-datapager-info>
Current page: {{currentPage}}
</ng-template>
</kendo-datapager>
`
})
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]