Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Getting Started

This section will describe how to get up and running with ag-Grid and Angular in the quickest possible manner using angularCLI, but please consult either the SystemJS or Webpack sections for information on using those tools, as well as the Next Steps section for more detailed information on using Angular with ag-Grid.

We document the main steps required when using Angular-CLI below, but please refer to ag-grid-angular-example on GitHub for a full working example of this.

Full Working Examples can be found in the Angular Examples section.

Pre-requisites

This page assumes you already have Angular-CLI installed - if not please refer to the Angular CLI Documentation for steps on how to do so.

Creating a Angular Project with ag-Grid

First we'll create a new project - lets call it ag-grid-test:

ng new ag-grid-test
cd ag-grid-test

Let's update our dependencies - first let's install ag-grid and ag-grid-angular:

npm i ag-grid --save
npm i ag-grid-angular --save

We are also going to assume an Angular CLI version 1.0.0-rc.x and Angular versions of 2.4.x for this example - you can use a higher (or lower) version here, but you'll need to ensure that you choose the corresponding version of Angular CLI if you do so.

Now let's create our main Application Component - this will be the component that creates the ag-Grid grid for us:

ng generate component MyGridApplication // or my-grid-application

And a component that we'll use in our grid:

ng generate component RedComponent  // or red-component

Based on the above commands, our application will have a selector of app-my-grid-application> - you can change this of course, but we'll use the default here. Let's use this in our application:

// src/app/app.component.html
<app-my-grid-application></app-my-grid-application>

Our grid component is going to be a simple renderer that styles it's contents red:

// src/app/red-component/red-component.component.ts
import {Component} from "@angular/core";

@Component({
    selector: 'app-red-component',
    templateUrl: './red-component.component.html'
})
export class RedComponentComponent {
    private params: any;

    agInit(params: any): void {
        this.params = params;
    }
}

// src/app/red-component/red-component.component.html
<span style="color: red">{{ params.value }}</span>

For our Application component, we'll have the following:

// src/app/my-grid-application/my-grid-application.component.ts
import {Component} from "@angular/core";
import {GridOptions} from "ag-grid";
import {RedComponentComponent} from "../red-component/red-component.component";

@Component({
    selector: 'app-my-grid-application',
    templateUrl: './my-grid-application.component.html'
})
export class MyGridApplicationComponent {
    private gridOptions: GridOptions;

    constructor() {
        this.gridOptions = {};
        this.gridOptions.columnDefs = [
            {
                headerName: "ID",
                field: "id",
                width: 100
            },
            {
                headerName: "Value",
                field: "value",
                cellRendererFramework: RedComponentComponent,
                width: 100
            },

        ];
        this.gridOptions.rowData = [
            {id: 5, value: 10},
            {id: 10, value: 15},
            {id: 15, value: 20}
        ]
    }
}

// src/app/my-grid-application/my-grid-application.component.html
<div style="width: 200px;">
    <ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-fresh"
                 [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

Now we need to let Angular know about our new components, as well as the ag-Grid Module:

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {AgGridModule} from "ag-grid-angular/main";
import {AppComponent} from "./app.component";
import {MyGridApplicationComponent} from "./my-grid-application/my-grid-application.component";
import {RedComponentComponent} from "./red-component/red-component.component";

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

And finally, we need to update angular-cli.json to include the ag-Grid styles we want to include:

"styles": [
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/theme-fresh.css"
],

With these changes in place we can now build and run our application with:

ng serve

The results of which will be:

And that's it! Of course there is much more you can do with Angular CLI, but the above should illustrate how quick and easy it is to get up and running with Angular and ag-Grid in very few steps.

Please take a look at the Next Steps section next for more detailed information on using Angular with ag-Grid.