Angular - Building with Angular CLI

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.

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.

The information documents a quick example and highlights the important steps to get ag-Grid working with Angular CLI, but does not go into the specifics of using ag-Grid or using Angular components within the grid.

For this please refer the Angular documentation for overall information about how to configure and use ag-Grid with Angular, as well as more detailed documentation around specifics like cellRenderers, cellEditors and filters using Angular.

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 version of 2.3.1 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.

The package dependencies should look something like this:

"dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "ag-grid": "^8.1.0",
    "ag-grid-angular": "^8.1.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "0.7.x"
}

Note that we've removed @angular/router as we don't need it for our example.

Let's clear the dependencies installed when we created the project and install our new ones:

rm -rf node_modules/*
npm install

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.

All the above items are specific to either Angular or Angular-CLI. The above is intended to point you in the right direction. If you need more information on this, please see the documentation for those projects.