Angular Data GridAG Grid Modules

Reduce your application bundle size by cherry picking grid features using AG Grid modules.

Bundles

To include all community or enterprise modules, either the AllCommunityModule or AllEnterpriseModule bundle can be used. This replicates the behaviour of the package versions of AG Grid prior to version 33.

If you are using the enterprise features Integrated Charts or Sparklines, then you need to provide the relevant module from AG Charts to AllEnterpriseModule, e.g. AllEnterpriseModule.with(AgChartsEnterpriseModule). Use the Module Selector tool below to help generate the correct registration code.

Selecting Modules

To work out which modules are required, select the features of the grid that you are using below. This will then provide the relevant registration code.

Validation

The ValidationModule adds helpful console warnings/errors, including if a feature has been enabled and the relevant module is missing. It is recommended to include it in your development build. It is automatically included if using one of the bundles (AllCommunityModule/AllEnterpriseModule).

ModuleRegistry.registerModules() can be called multiple times to register additional modules, so ModuleRegistry.registerModules([ValidationModule]) can be run when in development.

Registering AG Grid Modules

When including AG Grid in your application via modules it is your responsibility to register the required modules with the grid before it is instantiated. You can either register them globally or pass them individually to each grid instance.

Providing Modules Globally

You can import and register modules globally, but you need to ensure that this is done before any grids are instantiated. Any modules registered globally will be available to all grids.

• Import Modules
• Register Modules

A real-world example might be that we wish to use the Client-Side Row Model (the default row model) together with the CSV, Excel and Master/Detail features.

We need to register the grid modules we wish to use via the ModuleRegistry.

import { ModuleRegistry, ClientSideRowModelModule, CsvExportModule } from 'ag-grid-community';
import { ExcelExportModule, MasterDetailModule } from 'ag-grid-enterprise';

ModuleRegistry.registerModules([
    ClientSideRowModelModule,
    CsvExportModule,
    ExcelExportModule,
    MasterDetailModule
]);

Providing Modules To Individual Grids

Modules can be registered directly with individual grids. Modules registered directly with a grid will only be available to that grid. When a grid is instantiated it uses both globally and individually registered modules.

Individually registering modules is most useful when you have multiple grids in your application with varying feature requirements. It may also lead to smaller bundle sizes if your application uses lazy loading / code splitting.

The steps required are:

• Import Modules
• Pass to Grid

Using the same real-world example from above (the Client-Side Row Model together with the CSV, Excel and Master/Detail features), how we register the modules is now different.

import { Component } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular'
import { ClientSideRowModelModule, CsvExportModule } from 'ag-grid-community';
import { ExcelExportModule, MasterDetailModule } from 'ag-grid-enterprise';

@Component({
    selector: 'grid-example',
    standalone: true,
    imports: [AgGridAngular],
    template: `<ag-grid-angular [modules]="modules" 
        <!-- other properties -->
    />`
})
export class GridExample {
    modules: Module[] = [
        ClientSideRowModelModule,
        CsvExportModule,
        ExcelExportModule,
        MasterDetailModule
    ];

    // ... rest of component ...
}

The following example shows how you can configure individual grids using a combination of shared Global registrations as well as individual grid module registration. Note the following:

• Globally registered modules: [ClientSideRowModelModule, ColumnMenuModule, ContextMenuModule].
• Left Grid individually registers: [SetFilterModule, ClipboardModule, CsvExportModule]
• Right Grid individually registers: [TextFilterModule, NumberFilterModule, CsvExportModule, ExcelExportModule]

To see the difference in features open the context menu and open the column filter:

• The left grid has options for clipboard and CSV export.
• The right grid has options for CSV and Excel export.
• The left grid uses the Set Filter while the right grid uses the Text Filter or Number Filter depending on the cell data type.

Angular CLI Builders

The Angular CLI supports multiple builders as outlined in (Building Angular apps). It is recommended to compare the bundle size produced by each of the builders as the results can vary depending on the application.