# 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]);
```

To minimize bundle size, only register the modules you want to use. See the [Modules](/content/angular-data-grid/modules/index.html) 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.

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:

- [**Key Features**](/content/react-data-grid/key-features/index.html)  
Browse an overview of our commonly used features
- [**Tutorials**](/content/react-data-grid/deep-dive/index.html)  
Get started with our step-by-step tutorials
- [**Community vs. Enterprise**](/content/react-data-grid/community-vs-enterprise/index.html)  
Understand the differences between each version