Getting Started with AgGrid in Angular

Hi Guys,

ag-Grid is one of the best datagrid for javascript applications, it supports almost all JS frameworks, it is very rich in feature, it provides us full customisation option so that we can customise it according to our requirements.

Today I'm going to tell you how you can use it in your angular application.It is actually simple to implement ag-Grid into your angular application, I'll go through step by stepm process to implement it, so lets get started.

First you have to install ag-Grid and its angular dependency using npm, for this run command

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

Once installed now add AgGridModule into your modules import section.

import {AgGridModule} from 'ag-grid-angular/main';
@NgModule({
    imports: [
        BrowserModule,
        AgGridModule.withComponents([...optional Angular Components to be used in the grid....]),
        ...
})

If you're going to use other angular components with ag-Grid then import AgGridModule.withComponents() otherwise just import AgGridModule.

Now once you have done the above steps goto your component template file and ag-grid-angular component inside it

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-theme-fresh"
                [rowData]="rowData"
                [columnDefs]="columnDefs">
</ag-grid-angular>

ag-Grid requires rowData and columDefs for showing the data.

rowData is an array of js objects which is provided to grid for creating grid rows, here is some sample:

rowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
];

columnDefs is the definition of columns which tells the grid which data to show in which column, according to above data lets create three columns which matches with above data:

columnDefs = [
    {headerName: "Make", field: "make"},
    {headerName: "Model", field: "model", cellRendererFramework: RedComponentComponent},
    {headerName: "Price", field: "price"}
];

Here headerName is the name which will be displayed as a title of a column, field contains the name of the property from the row data. As you can see for Model column we have additional property named cellRendererFramework which helps us to provide some angular component for rendering custom cells for this column.

You can also provide additional fetaures to your grid, like if you want to sort your grid data then add enableSorting grid property to true, with this property now we can sort our columns by clicking on the column header.

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-theme-fresh"
                [rowData]="rowData"
                [columnDefs]="columnDefs"
		[enableSorting]="true">
</ag-grid-angular>

Other major feature which is must with large data grid is filtering of data, and ag-Grid also provide us this feature, for this you just have to add enableFilter and set it to true. Once this feature is enable you can filter column data by clicking column header menu.

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-theme-fresh"
                [rowData]="rowData"
                [columnDefs]="columnDefs"
		[enableFilter]="true">
</ag-grid-angular>

Once everything is done you can use ag-Grid with your data and with basic fetures.

Enjoy!