Customize pager drop down in Angular Grid component

You can customize the default values available in the pager dropdown of the Syncfusion Angular Grid by defining the pageSizes property as an array of strings or numbers within the Grid’s pageSettings configuration. This property determines the selectable page size options in the pager dropdown, allowing you to tailor the Grid’s pagination experience to your application’s needs.

app.component.ts

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

@Component({
    imports: [ GridModule ],
    providers: [PageService,  SortService, FilterService, GroupService],
    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 = data;
        this.initialPage = { pageSizes: ['5', '10', 'All'], };
    }
}

main.ts

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