Create an Angular Data Grid

Add AG Grid to your application in 60 seconds:

1. NPM Install

Install the ag-grid-angular package, which also installs ag-grid-community:

npm install ag-grid-angular

2. Register Modules

Register the AllCommunityModule to access all Community features:

import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';

// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);

To minimize bundle size, only register the modules you want to use. See the Modules page for more information.

3. Import the Angular Data Grid

import { AgGridAngular } from 'ag-grid-angular'; // Angular Data Grid Component
import type { ColDef } from 'ag-grid-community'; // Column Definition Type Interface

4. Define Rows and Columns

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [AgGridAngular], // Add Angular Data Grid Component
    styleUrls: ['./app.component.css'],
    template: ` `
})

export class AppComponent {
    // Row Data: The data to be displayed.
    rowData = [\
        { make: "Tesla", model: "Model Y", price: 64950, electric: true },\
        { make: "Ford", model: "F-Series", price: 33850, electric: false },\
        { make: "Toyota", model: "Corolla", price: 29600, electric: false },\
    ];

// Column Definitions: Defines the columns to be displayed.
    colDefs: ColDef[] = [\
        { field: "make" },\
        { field: "model" },\
        { field: "price" },\
        { field: "electric" }\
    ];
}

5. Angular Data Grid Component

Set Rows and Columns as ag-grid-angular component attributes:

template:
`
    <!-- The AG Grid component -->
    <ag-grid-angular
        [rowData]="rowData"
        [columnDefs]="colDefs" />
`

6. Example Angular Data Grid

Below is a live example of the application running. Click </> Code to see the code.

Angular Example - Getting Started - Quick Start Example

Next Steps

Now that you have a basic Angular Data Grid running, choose one of the following options to continue your learning journey: