Angular CLI

Building an ag-Grid Application with Angular CLI

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

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.


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

You can either create the project by hand, or check it out from our Angular Seed Repo in GitHub.

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

ng new ag-grid-cli cd ag-grid-cli

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

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

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 its 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 = <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-theme-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:

// src/app/app.module.ts 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:

// .angular-cli.json "styles": [ "../node_modules/ag-grid/dist/styles/ag-grid.css", "../node_modules/ag-grid/dist/styles/ag-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 More Details section next for more detailed information on using Angular with ag-Grid.