HelpBot Assistant

How can I help you?

Paging in Angular Grid Component

10 Mar 202624 minutes to read

Paging allows the Angular Grid to display data in segmented pages instead of loading the entire dataset at once. This greatly improves initial load performance and overall responsiveness especially with large datasets by rendering only the records of the current page.

To enable paging in the Angular Grid, import the PageService from @syncfusion/ej2-angular-grids and add it to the Grid component’s providers array.

import { Component, OnInit } from '@angular/core';
import { data } from './data';
import { PageService } from '@syncfusion/ej2-angular-grids';

 @Component({
    selector: 'app-root',   
    templateUrl: 'app.component.html',
    providers: [PageService],
    standalone: true,
    imports: [ GridModule, ]
 })

 export class AppComponent {
    public data: Object[];
    public pageSettings: Object;
    ngOnInit(): void {
        this.data = data;
        this.pageSettings = { pageCount: 5 }; 
    }
}

Enable paging

Enable paging by setting the allowPaging property to true. This automatically renders a pager at the bottom of the grid for easy navigation between pages.

Use the pageSettings property to customize paging options such as page size, current page, and total record count.

Paging improves performance by allowing the grid to fetch and display only a predefined number of records from the data source.

Customize pager options

Customize the pager options in the Syncfusion® Angular Grid using the pageSettings object:

  • pageCount: Number of pages to display in the pager.
  • currentPage: Denotes the active page.
  • pageSize: Number of rows displayed per page.
  • pageSizes: Displays a DropDownList in the pager to select desired page size.
  • enableQueryString: Include the current page in the URL as a query string parameter for easier navigation and bookmarking.

Change page size

TThe Grid supports adjusting the number of records shown per page for flexible data presentation. The pageSettings.pageSize property defines the initial number of records shown, replacing the default value of “12”.

The following example demonstrates modifying the page size dynamically using a textbox value and an external button click:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GridComponent, PageSettingsModel, PageService } from '@syncfusion/ej2-angular-grids'
import { TextBoxModule, TextBoxComponent } from '@syncfusion/ej2-angular-inputs'
import { ButtonAllModule,ButtonComponent } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit, ViewChild } from '@angular/core';
import { orderDetails } from './datasource';

@Component({
  imports: [GridModule,TextBoxModule, ButtonAllModule],
  providers: [PageService],
  standalone: true,
  selector: 'app-root',
  template: `
        <div>
          <label style="padding: 30px 17px 0 0">Enter page size:</label>
          <ejs-textbox #textbox width="120"></ejs-textbox>
          <button ejs-button #button id="button" (created)=clickHandler($event)>click button</button>
        </div>
        <div style="padding:5px 0 0 0">
          <ejs-grid #grid id="PagingGrid" [dataSource]="data" [allowPaging]="true" height="250">
            <e-columns>
              <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120">
              </e-column>
              <e-column field="CustomerID" headerText="Customer ID" width="150"></e-column>
              <e-column field="ShipCity" headerText="Ship City" width="150"></e-column>
              <e-column field="ShipName" headerText="Ship Name" width="150"></e-column>
            </e-columns>
          </ejs-grid>
        </div> `
})

export class AppComponent implements OnInit {

  public data?: object[];
  @ViewChild('grid')
  public grid?: GridComponent;
  public pageOptions?: PageSettingsModel;
  @ViewChild('textbox') public textbox?: TextBoxComponent;
  @ViewChild('button') public button?: ButtonComponent;

  ngOnInit(): void {
    this.data = orderDetails;
  }
  clickHandler(args:any): void {
    (this.button as ButtonComponent).element.addEventListener('click', (e: MouseEvent) => {
      e.preventDefault(); // Prevent any default behavior of the button click
      (this.grid as GridComponent).pageSettings.pageSize = parseInt((this.textbox as TextBoxComponent).value, 10);
    });
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Change page count

The Syncfusion® Grid supports customizing the number of page links shown in the pager through the pageSettings.pageCount property. The default value is 8, and it can be adjusted to enhance navigation, especially when handling large datasets..

The example below demonstrates updating the page count dynamically using a textbox value and an external button click:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService, GridComponent  } from '@syncfusion/ej2-angular-grids'
import { TextBoxModule,TextBoxComponent } from '@syncfusion/ej2-angular-inputs'
import { ButtonModule,ButtonComponent } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit, ViewChild } from '@angular/core';
import { orderDetails } from './datasource';

@Component({
imports: [GridModule,TextBoxModule,ButtonModule],
providers: [PageService],
standalone: true,
  selector: 'app-root',
  template: `
        <div>
          <label style="padding: 30px 17px 0 0">Enter page count:</label>
          <ejs-textbox #textbox width="120"></ejs-textbox>
          <button ejs-button #button id="button" (created)=clickHandler($event)>click button</button>
        </div>
        <div style="padding:5px 0 0 0">
          <ejs-grid #grid id="PagingGrid" [dataSource]="data" [allowPaging]="true" height="250">
            <e-columns>
              <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120">
              </e-column>
              <e-column field="CustomerID" headerText="Customer ID" width="150"></e-column>
              <e-column field="ShipCity" headerText="Ship City" width="150"></e-column>
              <e-column field="ShipName" headerText="Ship Name" width="150"></e-column>
            </e-columns>
          </ejs-grid>
        </div> `
})

export class AppComponent implements OnInit {

  public data?: object[];
  @ViewChild('grid')
  public grid?: GridComponent;
  @ViewChild('textbox') public textbox?: TextBoxComponent;
  @ViewChild('button') public button?: ButtonComponent;

  ngOnInit(): void {
    this.data = orderDetails;
  }
  clickHandler(args:any): void {
    (this.button as ButtonComponent).element.addEventListener('click', (e: MouseEvent) => {
      e.preventDefault(); // Prevent any default behavior of the button click
      (this.grid as GridComponent).pageSettings.pageCount = parseInt((this.textbox as TextBoxComponent).value, 10);
    });
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Change current page

The Syncfusion® Grid supports programmatic page navigation through the pageSettings.currentPage property. The default value is “1”, indicating the first page. This property can be modified during initial rendering or updated later to navigate to a specific page based on interaction.

The following example demonstrates dynamically changing the current page using a textbox value and an external button click:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService,GridComponent, PageSettingsModel } from '@syncfusion/ej2-angular-grids'
import { TextBoxModule ,TextBoxComponent} from '@syncfusion/ej2-angular-inputs'
import { ButtonModule,ButtonComponent } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit, ViewChild } from '@angular/core';
import { orderDetails } from './datasource';

@Component({
  imports: [ GridModule,TextBoxModule,ButtonModule],
  providers: [PageService],
  standalone: true,
  selector: 'app-root',
  template: `
        <div>
          <label style="padding: 30px 17px 0 0">Enter current page:</label>
          <ejs-textbox #textbox width="120"></ejs-textbox>
          <button ejs-button #button id="button" (created)=clickHandler($event)>click button</button>
        </div>
        <div style="padding:5px 0 0 0">
          <ejs-grid #grid id="PagingGrid" [dataSource]="data" [allowPaging]="true" height="250">
            <e-columns>
              <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120">
              </e-column>
              <e-column field="CustomerID" headerText="Customer ID" width="150"></e-column>
              <e-column field="ShipCity" headerText="Ship City" width="150"></e-column>
              <e-column field="ShipName" headerText="Ship Name" width="150"></e-column>
            </e-columns>
          </ejs-grid>
        </div> `
})

export class AppComponent implements OnInit {

  public data?: object[];
  @ViewChild('grid')
  public grid?: GridComponent;
  public pageOptions?: PageSettingsModel;
  @ViewChild('textbox') public textbox?: TextBoxComponent;
  @ViewChild('button') public button?: ButtonComponent;

  ngOnInit(): void {
    this.data = orderDetails;
  }
  clickHandler(args:any): void {
    (this.button as ButtonComponent).element.addEventListener('click', (e: MouseEvent) => {
      e.preventDefault(); // Prevent any default behavior of the button click
      (this.grid as GridComponent).pageSettings.currentPage = parseInt((this.textbox as TextBoxComponent).value, 10);
    });
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Add current page in URL as query string

The Syncfusion® Grid allows appending the current page number to the URL by enabling the enableQueryString property. When set to true, the grid includes the current page as a query string, maintaining pagination state and enabling easy sharing of specific views.

The following example demonstrates toggling this behavior using an EJ2 Toggle Switch Button. The switch’s change event updates the enableQueryString property dynamically.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule,GridComponent, PageService } from '@syncfusion/ej2-angular-grids'
import { SwitchModule,SwitchComponent } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit, ViewChild } from '@angular/core';
import { orderDetails } from './datasource';

@Component({
imports: [GridModule,SwitchModule],
providers: [PageService],
standalone: true,
    selector: 'app-root',
    template: `
        <div style="padding: 20px 0px 20px 0px">
            <label>Enable/Disable Query String</label>
            <ejs-switch #switch id="switch" [(checked)]="enableQuery" (change)="toggleQueryString()">
            </ejs-switch>
        </div>
        <ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='initialPage'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
            </e-columns>
        </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public initialPage?: object;
    @ViewChild('switch') public switch?: SwitchComponent;
    @ViewChild('grid') public grid?: GridComponent;
    public enableQuery = false;

    ngOnInit(): void {
        this.data = orderDetails;
    }
    toggleQueryString(): void {
        (this.grid as GridComponent).pageSettings.enableQueryString = this.enableQuery;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Pager template

The Syncfusion® Grid supports customizing the pager through the pagerTemplate property, allowing replacement of default pager controls with custom elements.

Within the template, context values such as currentPage, pageSize, pageCount,totalPages, totalRecordsCount, pagerTemplate pagerTemplate , are available for building customized pager layouts.

The example below demonstrates using a NumericTextBox within the pager via the pagerTemplate property.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NumericTextBoxModule,ChangeEventArgs } from '@syncfusion/ej2-angular-inputs'
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { data } from './datasource';
import {GridModule, PageService,GridComponent, PageSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule, NumericTextBoxModule],
    providers: [PageService],
    standalone: true,
    selector: 'app-root',
    template:`
        <ejs-grid #grid [dataSource]='data' [allowPaging]='true'
        [pageSettings]='initialPage'>
            <ng-template #pagerTemplate let-data>
            <div class="e-pagertemplate">
                <div class="col-lg-12 control-section">
                    <div class="content-wrapper">
                    <ejs-numerictextbox format='###.##' step='1' min='1' max='3' value={{data.currentPage}} 
                    (change)='change($event)' width="200px"></ejs-numerictextbox>
                    </div>
                </div>
                <div id="totalPages" class="e-pagertemplatemessage" 
                style="margin-top:5px;margin-left:30px;border: none; display: inline-block ">
                <span class="e-pagenomsg">{{data.currentPage}} of {{data.totalPages}} pages 
                ({{data.totalRecordsCount}} items)</span>
            </div>
            </div>
            </ng-template>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
            </ejs-grid>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
   

    @ViewChild('grid')
    public grid?: GridComponent;
    public data: Object[] = [];
    public initialPage?: PageSettingsModel;
    
    ngOnInit(): void {
        this.data = data;
        this.initialPage = { pageSize: 5 };
    }
    change(args: ChangeEventArgs) {
      this.initialPage = { currentPage: args.value };
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Pager with page size dropdown

The Syncfusion® Grid provides a built-in page size dropdown that enables adjusting the number of records displayed per page. This can be enabled by setting the pageSettings.pageSizes property to true.

When enabled, the pager displays a dropdown that allows selecting the preferred page size, and the grid updates immediately based on the selected value.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService, ToolbarService, EditService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
imports: [
        
        GridModule
    ],

providers: [PageService, ToolbarService, EditService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowPaging]='true' height='268px' [pageSettings]='pageSettings'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public pageSettings?: Object;

    ngOnInit(): void {
        this.data = data;
        this.pageSettings = { pageSizes: true, pageSize: 12 };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

If the pageSizes property is set to a boolean value such as true or false, the page size dropdown defaults to an array of strings containing options such as [‘All’, ‘5’, ‘10’, ‘15’, ‘20’]. The All option denotes rendering all data in a single page.

Customize page size dropdown

The Syncfusion® Grid allows customizing the page size dropdown by setting the pageSizes property as an array of strings. This defines the selectable page size options and controls the number of records displayed per page.

The following example demonstrates configuring custom values for the pager dropdown using the pageSizes property:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit } from '@angular/core';
import { orderDetails } from './datasource';

@Component({
imports: [ GridModule],
providers: [PageService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='initialPage'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                        <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public initialPage?: object;

    ngOnInit(): void {
        this.data = orderDetails;
        this.initialPage = { pageSizes: ['5', '10','15','20', 'All'], };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The pageSizes property can be configured with either an array of strings or a boolean value.

Navigate to specific page

The Syncfusion® Grid supports programmatic page navigation through the goToPage method. This method is useful for quickly accessing a particular page, especially when working with large datasets.

The example below demonstrates navigating to a specific page by using goToPage method through an external button click based on textbox input.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService, ToolbarService, EditService } from '@syncfusion/ej2-angular-grids'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'

import { Component, OnInit, ViewChild } from '@angular/core';
import { orderDetails } from './datasource';
import { GridComponent, PageSettingsModel } from '@syncfusion/ej2-angular-grids';
import { TextBoxComponent } from '@syncfusion/ej2-angular-inputs';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
        GridModule,
        TextBoxModule,
        ButtonModule
    ],

providers: [PageService, ToolbarService, EditService],
standalone: true,
    selector: 'app-root',
    template: `
        <div>
          <label style="padding: 30px 17px 0 0">Enter page index:</label>
          <ejs-textbox #textbox width="120"></ejs-textbox>
          <button ejs-button #button id="button" (created)=clickHandler($event)>click button</button>
        </div>
        <div style="padding:5px 0 0 0">
          <ejs-grid #grid id="PagingGrid" [dataSource]="data" [allowPaging]="true" height="250">
            <e-columns>
              <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120">
              </e-column>
              <e-column field="CustomerID" headerText="Customer ID" width="150"></e-column>
              <e-column field="ShipCity" headerText="Ship City" width="150"></e-column>
              <e-column field="ShipName" headerText="Ship Name" width="150"></e-column>
            </e-columns>
          </ejs-grid>
        </div> `
})

export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid')
    public grid?: GridComponent;
    public pageOptions?: PageSettingsModel;
    @ViewChild('textbox') public textbox?: TextBoxComponent;
    @ViewChild('button') public button?: ButtonComponent;

    ngOnInit(): void {
        this.data = orderDetails;
    }
    clickHandler(args:any): void {
        (this.button as ButtonComponent).element.addEventListener('click', (e: MouseEvent) => {
            e.preventDefault(); // Prevent any default behavior of the button click
            (this.grid as GridComponent).pagerModule.goToPage(parseInt((this.textbox as TextBoxComponent).value, 10));

        });
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Get the pager element

The pager element in the Syncfusion® Grid can be obtained using the getPager method which returns an HTML element representing the pager. This enables customizing the pager’s appearance or behavior to meet application requirements.

  this.grid.getPager()

Dynamically calculate page size based on element height

The Syncfusion® Grid supports calculating the pageSize dynamically based on the height of its parent element. This ensures efficient use of available space by adjusting the number of displayed records to prevent unnecessary scrolling or empty areas.

Use the calculatePageSizeByParentHeight method to recalculate the page size whenever the parent element’s height changes.

The following example demonstrates updating the page size dynamically using the calculatePageSizeByParentHeight method:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule,GridComponent, PageService, ToolbarService, EditService } from '@syncfusion/ej2-angular-grids'
import { ChangeEventArgs, NumericTextBoxComponent,NumericTextBoxModule} from '@syncfusion/ej2-angular-inputs';
import { Component, OnInit, ViewChild } from '@angular/core';
import { orderDetails } from './datasource';

@Component({
imports: [GridModule,NumericTextBoxModule],
providers: [PageService, ToolbarService, EditService],
standalone: true,
  selector: 'app-root',
  template: `
        <div style="padding:0 0 20px 0">
            <label style="padding: 30px 17px 0 0">Select page size:</label>
            <ejs-numerictextbox #numericTextbox placeholder='select container height' 
            format='###.##' min=150  step="50" (change)='calculatePageSize($event)' 
            width="200px"></ejs-numerictextbox>
        </div>
        <ejs-grid #grid [dataSource]="data" [allowPaging]="true" >
        <e-columns>
            <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90">
            </e-column>
            <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
            <e-column field="Freight" headerText="Freight" textAlign='Right' format='C2' 
            width="90"></e-column>
            <e-column field="OrderDate" headerText="Order Date" textAlign='Right' 
            format='yMd' width="120"></e-column>
        </e-columns>
        </ejs-grid>`
})
export class AppComponent implements OnInit {

  public data?: object[];
  @ViewChild('grid') grid?: GridComponent;
  @ViewChild('numericTextbox') public numerictextbox?: NumericTextBoxComponent;

  ngOnInit(): void {
    this.data = orderDetails;
  }
  calculatePageSize({ value }: ChangeEventArgs) {
    (this.grid as GridComponent).pageSettings.pageSize = (this.grid as GridComponent).calculatePageSizeByParentHeight((value as number).toString());
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render pager at the top of the grid

By default, pager displayed at the bottom of the grid. It is also possible to displaying the pager at the top of the grid. This can be achieved by handling the dataBound event, which triggers after the grid has finished rendering. Within this event, the pager element can be programmatically moved to the top of the grid.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService, ToolbarService, EditService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [PageService, ToolbarService, EditService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='pagerAtTop' [dataSource]='data' [allowPaging]='true' (dataBound)='dataBound()'
               height='268px' [pageSettings]='pageSettings'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public pageSettings?: object;
    @ViewChild('grid')
    public grid?: GridComponent;
    public toolbar?: ToolbarItems[];
    public initialGridLoad: boolean = true;

    ngOnInit(): void {
        this.data = data;
        this.pageSettings = { pageSizes: true, pageSize: 12 };
    }
    dataBound() {
        if (this.initialGridLoad) {
            this.initialGridLoad = false;
            const pager = document.getElementsByClassName('e-gridpager');
            let topElement;
            if ((this.grid as any).allowGrouping || (this.grid as any).toolbar) {
                topElement = (this.grid as any).allowGrouping ? document.getElementsByClassName('e-groupdroparea') :
                    document.getElementsByClassName('e-toolbar');
            } else {
                topElement = document.getElementsByClassName('e-gridheader');
            }
            (this.grid as any).element.insertBefore(pager[0], topElement[0]);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

During paging actions, the pager component triggers the following three events:

  • The created event triggers when Pager is created.
  • The click event triggers when the numeric items in the pager are clicked.
  • The dropDownChanged event triggers when pageSize DropDownList value is selected.

Pager events

The Syncfusion® Grid component provides two primary events for handling paging operations:

actionBegin: Triggered before a paging action occurs, such as changing the page or page size. Use this event to customize or control the behavior of paging actions.

actionComplete: Triggered after a paging action is completed. It provides details such as the current page number, selected page size, and total record count. Use this event to perform actions or update the UI after the operation has been executed.

The following example demonstrates using these events to display notification messages that indicate the current and upcoming page during paging operations.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule,GridComponent, PageService } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit, ViewChild } from '@angular/core';
import { PageEventArgs } from '@syncfusion/ej2-grids';
import { orderDetails } from './datasource';

@Component({
    imports: [ GridModule],
    providers: [PageService],
    standalone: true,
    selector: 'app-root',
    template: `
    <p id="message1">{{ message1 }}</p>
    <p id="message">{{ message }}</p>    
    <ejs-grid #grid [dataSource]="data" allowPaging="true"
            (actionBegin)="onActionBegin($event)" (actionComplete)="onActionComplete($event)"
            [pageSettings]="initialPage">
            <e-columns>
                <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-column>
                <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
                <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="90"></e-column>
                <e-column field="OrderDate" headerText="Order Date" textAlign="Right" format="yMd" width="120"></e-column>
            </e-columns>
        </ejs-grid>`
})
export class AppComponent implements OnInit {
    public data?: object[];
    public initialPage?: object;
    @ViewChild('grid') grid?: GridComponent;
    public message?: string;
    public message1?: string;

    ngOnInit(): void {
        this.data = orderDetails;
        this.initialPage = { pageSize: 5 };
    }
    onActionBegin({requestType,currentPage,previousPage}: PageEventArgs) {
        if (requestType === 'paging') {
            this.message = (currentPage as string) > (previousPage as string)
                ? `You are going to switch to page ${parseInt((currentPage as string), 10) + 1}`
                : `You are going to switch to page ${previousPage}`;
        }
    }
    onActionComplete(args: PageEventArgs) {
        if (args.requestType === 'paging') {
            this.message1 = 'Now you are in page ' + args.currentPage;
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also