Search

Angular Data GridQuick Start

AG Grid is a high-performance Angular Data Grid library for building Angular Tables with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit Community vs. Enterprise to learn more.

Angular Data Grid quick start video tutorial thumbnail

Create a Angular Data Grid Copy

Add AG Grid to your application in 60 seconds:

1

NPM Install Copy

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

npm install ag-grid-angular
2

Register Modules Copy

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 Copy

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 Copy

@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 Copy

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 Copy

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

To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.

Next Steps Copy

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

Key Features

Browse an overview of our commonly used features

Tutorials

Get started with our step-by-step tutorials

Community vs. Enterprise

Understand the differences between each version