LiveLoveApp logo

Installing AG Grid with Angular


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';

  declarations: [AppComponent],
  imports: [
  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.

  selector: 'app-grid',
  standalone: true,
  imports: [AgGridModule],
  template: `
  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.