Angular Data Grid Example

This example demonstrates AG Grid integration with Angular using standalone components and TypeScript for a modern Angular application.

Overview

AG Grid provides native Angular support through the ag-grid-angular package. This example covers:

Angular standalone components
TypeScript type safety
Template-based grid configuration
Module registration
Property binding

Installation

Install packages

npm install ag-grid-angular

This automatically installs ag-grid-community as a dependency.

Import and register the AG Grid modules you need.

Import the component

Add AgGridAngular to your component’s imports.

Complete Angular Example

import { Component } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import type { ColDef } from 'ag-grid-community';
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';

ModuleRegistry.registerModules([AllCommunityModule]);

// Row Data Interface
interface IRow {
    make: string;
    model: string;
    price: number;
    electric: boolean;
}

@Component({
    standalone: true,
    imports: [AgGridAngular],
    selector: 'my-app',
    template: `
        <div class="content" style="width: 100%; height: 500px;">
            <!-- The AG Grid component -->
            <ag-grid-angular
                class="ag-theme-quartz"
                style="width: 100%; height: 100%;"
                [rowData]="rowData"
                [columnDefs]="colDefs"
                [defaultColDef]="defaultColDef"
            />
        </div>
    `,
})
export class AppComponent {
    // Row Data: The data to be displayed.
    rowData: IRow[] = [
        { 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 },
        { make: 'Mercedes', model: 'EQA', price: 48890, electric: true },
        { make: 'Fiat', model: '500', price: 15774, electric: false },
        { make: 'Nissan', model: 'Juke', price: 20675, electric: false },
    ];

    // Column Definitions: Defines & controls grid columns.
    colDefs: ColDef<IRow>[] = [
        { field: 'make' },
        { field: 'model' },
        { field: 'price' },
        { field: 'electric' }
    ];

    defaultColDef: ColDef = {
        flex: 1,
    };
}

Key Angular Concepts

Module Registration

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

ModuleRegistry.registerModules([AllCommunityModule]);

Module registration should happen once at application startup. Place it at the top level of your component or in a shared module.

Standalone Components

Modern Angular applications use standalone components:

@Component({
    standalone: true,
    imports: [AgGridAngular],  // Import AG Grid component
    selector: 'my-app',
    template: `...`
})

Property Binding

Bind data and configuration using Angular’s property binding syntax:

<ag-grid-angular
    [rowData]="rowData"
    [columnDefs]="colDefs"
    [defaultColDef]="defaultColDef"
/>

Type Safety

Use TypeScript interfaces for type-safe development:

import type { ColDef } from 'ag-grid-community';

interface IRow {
    make: string;
    model: string;
    price: number;
    electric: boolean;
}

colDefs: ColDef<IRow>[] = [...];  // Fully typed

Advanced Angular Integration

Grid API Access
HTTP Data Loading
Custom Cell Renderer
Event Handling

Access the Grid API for programmatic operations:

import type { GridApi, GridReadyEvent } from 'ag-grid-community';

export class AppComponent {
    private gridApi!: GridApi;

    onGridReady(params: GridReadyEvent) {
        this.gridApi = params.api;
    }

    exportData() {
        this.gridApi.exportDataAsCsv();
    }
}

<button (click)="exportData()">Export CSV</button>
<ag-grid-angular
    (gridReady)="onGridReady($event)"
    ...
/>

Load data from an API using HttpClient:

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({ ... })
export class AppComponent implements OnInit {
    rowData: IRow[] = [];

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.http.get<IRow[]>('https://api.example.com/data')
            .subscribe(data => this.rowData = data);
    }
}

Create Angular components as cell renderers:

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';

@Component({
    standalone: true,
    template: `
        <span [style.color]="textColor">
            {{ formattedValue }}
        </span>
    `
})
export class PriceCellRenderer implements ICellRendererAngularComp {
    public textColor!: string;
    public formattedValue!: string;

    agInit(params: ICellRendererParams): void {
        this.textColor = params.value > 50000 ? 'red' : 'green';
        this.formattedValue = '$' + params.value.toLocaleString();
    }

    refresh(params: ICellRendererParams): boolean {
        return false;
    }
}

// Use in column definition
colDefs: ColDef[] = [
    { field: 'make' },
    { 
        field: 'price',
        cellRenderer: PriceCellRenderer
    },
];

Handle grid events with Angular event binding:

export class AppComponent {
    onCellClicked(event: CellClickedEvent) {
        console.log('Cell clicked:', event.value);
    }

    onRowSelected(event: RowSelectedEvent) {
        console.log('Row selected:', event.data);
    }
}

<ag-grid-angular
    (cellClicked)="onCellClicked($event)"
    (rowSelected)="onRowSelected($event)"
    ...
/>

Grid Configuration Options

Enhanced Column Definitions

colDefs: ColDef<IRow>[] = [
    { 
        field: 'make',
        headerName: 'Manufacturer',
        sortable: true,
        filter: true,
        resizable: true
    },
    { 
        field: 'model',
        sortable: true,
        filter: true
    },
    { 
        field: 'price',
        sortable: true,
        filter: 'agNumberColumnFilter',
        valueFormatter: params => '$' + params.value.toLocaleString()
    },
    { 
        field: 'electric',
        headerName: 'Electric Vehicle'
    }
];

Default Column Definition

defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
    resizable: true,
    sortable: true,
    filter: true,
};

NgZone Considerations

AG Grid can run outside Angular’s NgZone for better performance:

import { Component, NgZone } from '@angular/core';

@Component({ ... })
export class AppComponent {
    constructor(private ngZone: NgZone) {}

    // For operations that don't need change detection
    updateGrid() {
        this.ngZone.runOutsideAngular(() => {
            // Grid operations here
        });
    }
}

For most applications, you don’t need to worry about NgZone. AG Grid handles this automatically.

Module Selection

import { 
    ClientSideRowModelModule,
    ModuleRegistry 
} from 'ag-grid-community';
import { 
    ColumnsToolPanelModule 
} from 'ag-grid-enterprise';

ModuleRegistry.registerModules([
    ClientSideRowModelModule,
    ColumnsToolPanelModule,
]);

Best Practices

Register modules once - Do module registration at the application level
Use standalone components - Modern Angular pattern for better tree-shaking
Type your data - Define interfaces for row data
Set container height - Grid needs a defined height to display properly
Handle events properly - Use Angular’s event binding syntax
Leverage dependency injection - Inject services for data loading

Getting Started

Framework Examples

Advanced Examples

Angular Data Grid Example

Overview

Installation

Complete Angular Example

Key Angular Concepts

Module Registration

Standalone Components

Property Binding

Type Safety

Advanced Angular Integration

Grid Configuration Options

Enhanced Column Definitions

Default Column Definition

NgZone Considerations

Module Selection

Best Practices

Next Steps

Build docs developers (and LLMs) love

Getting Started

Framework Examples

Advanced Examples

​Overview

​Installation

​Complete Angular Example

​Key Angular Concepts

​Module Registration

​Standalone Components

​Property Binding

​Type Safety

​Advanced Angular Integration

​Grid Configuration Options

​Enhanced Column Definitions

​Default Column Definition

​NgZone Considerations

​Module Selection

​Best Practices

​Next Steps

Build docs developers (and LLMs) love

Overview

Installation

Complete Angular Example

Key Angular Concepts

Module Registration

Standalone Components

Property Binding

Type Safety

Advanced Angular Integration

Grid Configuration Options

Enhanced Column Definitions

Default Column Definition

NgZone Considerations

Module Selection

Best Practices

Next Steps