AG-Grid in Angular:
The “ag” part of ag-Grid stands for “agnostic”. The internal ag-Grid engine is executed in TypeScript with zero dependencies. ag-Grid supports Angular through a wrapper component. The wrapper lets the user to use ag-Grid in the application like any other Angular component.
In this article, we will walk you through the essential steps to add ag-Grid to an existing Angular project, and configure some of the essential features of it.
Adding ag-Grid to the project:
ag-Grid and its Angular wrapper are distributed as NPM packages, which should work with any common Angular project module bundler setup. Let’s follow the Angular CLI instructions – run the following in the developer’s terminal:
npm install -g @angular/cli
ng new my-app –style scss –routing false
cd my-app
ng serve
Further, add the ag-Grid NPM packages and run the following command in my-app:
npm install –save ag-grid-community ag-grid-angular
Now, let’s add the ag-Grid Angular module to the app module:
import { BrowserModule } from ‘@angular/platform-browser';
import { NgModule } from ‘@angular/core';
import { AppComponent } from ‘./app.component';
import { AgGridModule } from ‘ag-grid-angular';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AgGridModule.withComponents([])],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
The next step is to add the ag-Grid styles – import them in styles.scss:
@import “~ag-grid-community/dist/styles/ag-grid.css”;
@import “~ag-grid-community/dist/styles/ag-theme-balham.css”;
The above code imports the grid “structure” stylesheet (ag-grid.css), and one of the available grid themes: (ag-theme-balham.css). The grid ships have some different themes; pick one that matches the project design.
Next, let’s declare the basic grid configuration. Edit src/app.component.ts:
import { Component } from ‘@angular/core';
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’]
})
export class AppComponent {
title = ‘app';
columnDefs = [
{headerName: ‘Make’, field: ‘make’ },
{headerName: ‘Model’, field: ‘model’ },
{headerName: ‘Price’, field: ‘price’}
];
rowData = [
{ make: ‘Toyota’, model: ‘Celica’, price: 35000 },
{ make: ‘Ford’, model: ‘Mondeo’, price: 32000 },
{ make: ‘Porsche’, model: ‘Boxter’, price: 72000 }
];
}
The above code represents two vital configuration properties of the grid – the column definitions and the data. In this case, the column definitions contain three columns, each column entry stipulates the header label and the data field to be displayed in the body of the table.
Finally, let’s add the component definition to the template. Edit app/app.component.html and remove the scaffold code:
<ag-grid-angular
style=”width: 500px; height: 500px;”
class=”ag-theme-balham”
[rowData]=”rowData”
[columnDefs]=”columnDefs”
>
</ag-grid-angular>
This is the ag-grid component definition, with two property bindings – rowData and columnDefs. The component also accepts the standard DOM style and class.