Angular Data GridQuick Start

Create a Grid in 60 seconds.

Install

Create a new Angular project and install the ag-grid-angular library:

npm install ag-grid-angular

Create

Replace the app.component.ts file with the following code:

import { Component } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular'; // Angular Grid Logic
import { ColDef } from 'ag-grid-community'; // Column Definitions Interface

// Row Data Interface
interface IRow {
  mission: string;
  company: string;
  location: string;
  date: string;
  time: string;
  rocket: string;
  price: number;
  successful: boolean;
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AgGridModule], // Add AG Grid Module to component
  styleUrls: ['./app.component.css'],
  template:
  `
   <div class="content">
     <!-- The AG Grid component, with Dimensions, CSS Theme, Row Data, and Column Definition -->
     <ag-grid-angular
       style="width: 600px; height: 500px;"
       class="ag-theme-quartz"
       [rowData]="rowData"
       [columnDefs]="colDefs">
     </ag-grid-angular>
   </div>
  `
})

export class AppComponent {
  // Row Data: The data to be displayed.
  rowData: IRow[] = [
    { mission: "CRS SpX-25", company: "SpaceX", location: "LC-39A, Kennedy Space Center, Florida, USA", date: "2022-07-15", time: "0:44:00", rocket: "Falcon 9 Block 5", price: 12480000, successful: true },
    { mission: "LARES 2 & Cubesats", company: "ESA", location: "ELV-1, Guiana Space Centre, French Guiana, France", date: "2022-07-13", time: "13:13:00", rocket: "Vega C", price: 4470000, successful: true },
    { mission: "Wise One Looks Ahead (NROL-162)", company: "Rocket Lab", location: "Rocket Lab LC-1A, Māhia Peninsula, New Zealand", date: "2022-07-13", time: "6:30:00", rocket: "Electron/Curie", price: 9750000, successful: true }
  ];

  // Column Definitions: Defines & controls grid columns.
  colDefs: ColDef[] = [
    { field: "mission" },
    { field: "company" },
    { field: "location" },
    { field: "date" },
    { field: "price" },
    { field: "successful" },
    { field: "rocket" }
  ];
}

Replace the styles.css file with the following code:

/* Core Grid CSS */
@import 'ag-grid-community/styles/ag-grid.css';
/* Theme Specific CSS */
@import 'ag-grid-community/styles/ag-theme-quartz.css';

Run

When you run your application, you should see a basic grid with three rows:

Note: To live-edit the code, open the example in CodeSandbox or Plunkr using the buttons in the lower-right

Next Steps

Read our Introductory Tutorial.
Watch our Video Tutorials.