Implementing a Global Custom Pager Template in Kendo UI for Angular Grid

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

I need to customize the Grid Pager for our entire application. I aim to use a single kendoPagerTemplate directive for all Grid instances. This should be achieved without having to define the template in every place where the Grid is used.

This Knowledge Base article also answers the following questions:

• How can I apply a custom Pager template to all Kendo UI for Angular Grid instances?
• Is it possible to define a global Pager template for the Kendo UI for Angular Grid?
• Can I use a directive to apply a custom Pager template across multiple Grids in Angular?

Solution

To apply a custom Pager template across all Kendo UI for Angular Grid instances in your application, consider the following approaches:

• Reusable Pager Component
• Grid Wrapper Component

Creating a Reusable Pager Component

1. Utilize the Kendo UI for Angular Pager to create a designated pager component with the desired modifications.

   ts

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-custom-pager',
     template: `
     <kendo-pager [pageSize]="pageSize" [skip]="skip" [total]="total" (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]="6"></kendo-pager-numeric-buttons>
         <kendo-pager-next-buttons></kendo-pager-next-buttons>
         <kendo-pager-info></kendo-pager-info>
       </ng-template>
     </kendo-pager>
     `
   })
   export class CustomPagerComponent {
     public pageSize: number = 0;
     public skip: number = 0;
     public total: number = 0;
     // Implement necessary logic
   }

2. Use a custom directive to programmatically append the custom Pager to the desired Grid components.

   ts

   import { Directive, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
   import { CustomPagerComponent } from './custom-pager.component';
   
   @Directive({
     selector: '[externalPager]',
   })
   export class PagerGridDirective implements OnInit {
     constructor(private viewContainerRef: ViewContainerRef, private resolver: ComponentFactoryResolver) {}
   
     ngOnInit() {
       const factory = this.resolver.resolveComponentFactory(CustomPagerComponent);
       const componentRef = this.viewContainerRef.createComponent(factory);
       // Implement necessary logic for pagination changes
     }
   }

3. Apply the directive to append the Pager to the Grid and ensure the pagination changes are reflected in the desired components.

   html

   <kendo-grid [kendoGridBinding]="gridView" externalPager (indicatePageChange)="onPageChanged()">
       <!-- Grid content -->
   </kendo-grid>

The following example demonstrates the suggested approach in action.

Change Theme

Theme

Loading ...

Creating a Custom Wrapper Component

Alternatively, create a custom wrapper component for the Kendo UI for Angular Grid that incorporates the custom pager template and use this component throughout your application.

The following example demonstrates how to create a wrapper component for the Grid with a custom Pager configuration.

Change Theme

Theme

Loading ...

Suggested Links

• Grid Overview
• Pager Overview
• API Reference of the Grid Component
• API Reference of the Pager Component
• Grid Paging
• Pager Template