---
title: "Quick Start"
framework: angular
version: "36.1.0"
---

# Quick 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](https://www.ag-grid.com/angular-data-grid/community-vs-enterprise/) to learn more.

[Angular Data Grid quick start video tutorial](https://www.youtube.com/watch?v=X_Ip_jGDtho&list=PLsZlhayVgqNw6VHFn4j6FcJM5vLACsf0x)

## 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`:

```bash
npm install ag-grid-angular
```

### 2. Register Modules

Register the `AllCommunityModule` to access all Community features:

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

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

> **Note**
>
> To minimize bundle size, only register the modules you want to use. See the [Modules](https://www.ag-grid.com/angular-data-grid/modules/) page for more information.

### 3. Import the Angular Data Grid

```js
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

```jsx
@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:

```js
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.

#### Quick Start Example

```ts
import { Component } from "@angular/core";

import { AgGridAngular } from "ag-grid-angular";
import type { ColDef } from "ag-grid-community";
import {
  AllCommunityModule,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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: 100%;">
      <!-- The AG Grid component, with Dimensions, CSS Theme, Row Data, and Column Definition -->
      <ag-grid-angular
        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,
  };
}
```

[Live example: Quick Start Example](https://www.ag-grid.com/examples/getting-started/quick-start-example/angular)

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

## Next Steps

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

- [Key Features](https://www.ag-grid.com/angular-data-grid/key-features/) — Browse an overview of our commonly used features
- [Tutorials](https://www.ag-grid.com/angular-data-grid/deep-dive/) — Get started with our step-by-step tutorials
- [Community vs. Enterprise](https://www.ag-grid.com/angular-data-grid/community-vs-enterprise/) — Understand the differences between each version