LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Installing AG Grid with Angular

Installing

To get started, install the ag-grid-community and ag-grid-angular modules.

npm install --save ag-grid-community ag-grid-angular

Angular Module

Next, we need to import the AgGridModule into our Angular Application.

import { AgGridModule } from 'ag-grid-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([])
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Note, the withComponents() static method is not required when using Ivy + AG Grid version >= 28

We can also import the AgGridModule when using standalone components.

@Component({
  selector: 'app-grid',
  standalone: true,
  imports: [AgGridModule],
  template: `
    <ag-grid-angular
      class="ag-theme-material"
    ></ag-grid-angular>
  `,
  styles: [
    `
      :host {
        height: 100%;
        width: 100%;
      }

      ag-grid-angular {
        height: 100%;
        width: 100%;
      }
    `,
  ],
})
export class GridComponent {}

Styling with a Theme

Import the necessary base and theme CSS files.

@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css";

💁 We'll cover custom styling in more detail in the Advanced AG Grid section.