Syncfusion AI Assistant

How can I help you?

Modules in Angular Grid Component

Syncfusion Angular Grid modules help optimize your application’s bundle size by including only the features you need. To enable a specific Grid feature, import and inject the corresponding Feature Module into your Grid configuration. The available Grid Feature Modules include:

Feature Module Description
Paging PageService Inject this module to use paging feature.
Sorting SortService Inject this module to use sorting feature.
Filtering FilterService Inject this module to use filtering feature.
Grouping GroupService Inject this module to use grouping feature.
Lazy Load Grouping LazyLoadGroupService Inject this module to use lazy load grouping feature.
Editing EditService Inject this module to use editing feature.
Aggregates AggregateService Inject this module to use aggregate feature.
Column Chooser ColumnChooserService Inject this module to use column chooser feature.
Column Menu ColumnMenuService Inject this module to use column menu feature.
Command Column CommandColumnService Inject this module to use command column feature.
Context Menu ContextMenuService Inject this module to use context menu feature.
Detail Row DetailRowService Inject this module to use detail template feature.
Foreign Key ForeignKeyService Inject this module to use foreign key feature.
Resize ResizeService Inject this module to use resize feature.
Reordering ReorderService Inject this module to use reorder feature.
Row Drag and Drop RowDDService Inject this module to use row drag and drop feature.
Virtual Scrolling VirtualScrollService Inject this module to use virtual scrolling feature.
Infinite Scrolling InfiniteScrollService Inject this module to use infinite scrolling feature.
Toolbar ToolbarService Inject this module to use toolbar feature.
Excel Export ExcelExportService Inject this module to use excel export feature.
PDF Export PdfExportService Inject this module to use PDF export feature.

Enabling basic features

The following example demonstrates how to enable basic features such as Paging, Sorting, Filtering, Toolbar and Editing by importing required modules from @syncfusion/ej2-angular-grids and injecting them into the grid component.

import { Component, OnInit } from '@angular/core';
//Import the required grid modules from the grid package
import { FilterService, GridModule, PageService, PageSettingsModel, SortService, EditService, ToolbarService, FilterSettingsModel, EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-grids';
// Import Grid data from external file
import { data } from './datasource';

@Component({
    imports: [GridModule],
    /* Inject required Grid features */
    providers: [PageService, SortService, FilterService, EditService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowPaging]="true" [allowSorting]="true" [pageSettings]="pageSettings" [editSettings]='editSettings'
                    [toolbar]='toolbar' [allowFiltering]="true" [filterSettings]='filterSettings'>
                <e-columns>
                        <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true'  [validationRules]='orderIDRules' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerName' headerText='Customer Name'validationRules]='customerNameRules' width=100></e-column>
                        <e-column field='Freight' headerText='Freight' format='C2' editType='numericedit' width=120></e-column>
                        <e-column field='OrderDate' headerText='Order Date' format='yMd' editType='datepickeredit' width=100></e-column>
                        <e-column field='ShipCountry' headerText='Ship Country' editType='dropdownedit' width=100></e-column>
                    </e-columns>
                </ejs-grid>`
})

export class AppComponent implements OnInit {

    public data?: object[];
    public pageSettings?: PageSettingsModel;
    public filterSettings?: FilterSettingsModel;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public orderIDRules?: object;
    public customerIDRules?: object;
    ngOnInit(): void {
        this.data = data;
        this.pageSettings = { pageSize: 6 };
        this.filterSettings = { type: 'CheckBox' }
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.orderIDRules = { required: true, number: true }; this.customerIDRules = { required: true };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let data: Object[] = [
    { OrderID: 10248, CustomerName: 'Ana Trujillo', OrderDate: new Date(2025, 0, 12), ShipCountry: 'France', Freight: 32.38 },
    { OrderID: 10249, CustomerName: 'Martin Sommer', OrderDate: new Date(2025, 0, 15), ShipCountry: 'Germany', Freight: 11.61 },
    { OrderID: 10250, CustomerName: 'Thomas Hardy', OrderDate: new Date(2025, 1, 5), ShipCountry: 'Brazil', Freight: 65.83 },
    { OrderID: 10251, CustomerName: 'Elizabeth Lincoln', OrderDate: new Date(2025, 1, 18), ShipCountry: 'France', Freight: 41.34 },
    { OrderID: 10252, CustomerName: 'Victoria Ashworth', OrderDate: new Date(2025, 2, 10), ShipCountry: 'Belgium', Freight: 51.30 },
    { OrderID: 10253, CustomerName: 'Martine Rance', OrderDate: new Date(2025, 2, 22), ShipCountry: 'Brazil', Freight: 58.17 },
    { OrderID: 10254, CustomerName: 'John Smith', OrderDate: new Date(2025, 3, 3), ShipCountry: 'USA', Freight: 23.45 },
    { OrderID: 10255, CustomerName: 'Emily Johnson', OrderDate: new Date(2025, 3, 15), ShipCountry: 'Canada', Freight: 45.67 },
    { OrderID: 10256, CustomerName: 'Michael Brown', OrderDate: new Date(2025, 4, 7), ShipCountry: 'UK', Freight: 33.90 },
    { OrderID: 10257, CustomerName: 'Sophia Davis', OrderDate: new Date(2025, 4, 19), ShipCountry: 'Australia', Freight: 29.75 },
    { OrderID: 10258, CustomerName: 'David Wilson', OrderDate: new Date(2025, 5, 2), ShipCountry: 'Germany', Freight: 62.10 },
    { OrderID: 10259, CustomerName: 'Olivia Martinez', OrderDate: new Date(2025, 5, 18), ShipCountry: 'Spain', Freight: 37.50 },
    { OrderID: 10260, CustomerName: 'James Anderson', OrderDate: new Date(2025, 6, 5), ShipCountry: 'Italy', Freight: 48.25 },
    { OrderID: 10261, CustomerName: 'Ava Thomas', OrderDate: new Date(2025, 6, 21), ShipCountry: 'Netherlands', Freight: 27.80 },
    { OrderID: 10262, CustomerName: 'William Taylor', OrderDate: new Date(2025, 7, 9), ShipCountry: 'Sweden', Freight: 55.60 },
    { OrderID: 10263, CustomerName: 'Mia Harris', OrderDate: new Date(2025, 7, 25), ShipCountry: 'Norway', Freight: 21.40 },
    { OrderID: 10264, CustomerName: 'Daniel Clark', OrderDate: new Date(2025, 8, 6), ShipCountry: 'Switzerland', Freight: 49.90 },
    { OrderID: 10265, CustomerName: 'Charlotte Lewis', OrderDate: new Date(2025, 8, 17), ShipCountry: 'Austria', Freight: 34.20 },
    { OrderID: 10266, CustomerName: 'Matthew Hall', OrderDate: new Date(2025, 9, 4), ShipCountry: 'Belgium', Freight: 44.75 },
    { OrderID: 10267, CustomerName: 'Amelia Allen', OrderDate: new Date(2025, 9, 20), ShipCountry: 'Denmark', Freight: 28.60 },
    { OrderID: 10268, CustomerName: 'Christopher Young', OrderDate: new Date(2025, 10, 3), ShipCountry: 'Finland', Freight: 39.85 },
    { OrderID: 10269, CustomerName: 'Harper King', OrderDate: new Date(2025, 10, 14), ShipCountry: 'Ireland', Freight: 36.40 },
    { OrderID: 10270, CustomerName: 'Joshua Wright', OrderDate: new Date(2025, 10, 26), ShipCountry: 'New Zealand', Freight: 52.90 },
    { OrderID: 10271, CustomerName: 'Evelyn Scott', OrderDate: new Date(2025, 11, 5), ShipCountry: 'Japan', Freight: 61.75 }
];