Post
Ask Question

Ag-Grid In Angular

Ag-grid is JavaScript grid that is widely used in web applications. Ag-grid is used in JavaScript as well as in Angular 2. We can use different grid features like sorting, filtration, section and many more in ag-grid.

Implementing ag-grid in Angular 2

For using ag-grid in Angular application follow the following steps.

  • First of all, get an angular seed project with all of the angular 2 dependencies.
  • Now open your packge.json file and include ag-grid as dependency
    1. "dependencies": {  
    2. …..  
    3. "ag-grid": "12.0.x",  
    4. "ag-grid-angular": "12.0.x",  
    5. "ag-grid-enterprise": "12.0.x",  
    6. ………  
    7.   
    8. }  
  • Update the systems.config.js file as following
    1. map: {  
    2.    'ag-grid-angular': 'node_modules/ag-grid-angular',  
    3. 'ag-grid': 'node_modules/ag-grid',  
    4. 'ag-grid-enterprise': 'node_modules/ag-grid-enterprise'  
    5.   
    6. }  
  • Import ag-grid module in your application app module
    1. import {NgModule} from "@angular/core";  
    2. import {BrowserModule} from "@angular/platform-browser";  
    3. // ag-grid  
    4. import {AgGridModule} from "ag-grid-angular/main";  
    5. // application  
    6. import {AppComponent} from "./app.component";  
    7.   
    8. @NgModule({  
    9.     imports: [  
    10.         BrowserModule,  
    11.         AgGridModule  
    12.     ],  
    13.     declarations: [  
    14.         AppComponent  
    15.     ],  
    16.     bootstrap: [AppComponent]  
    17. })  
    18. export class AppModule {  
    19. }  
  • Create Angular 2 Component for using Ag-grid in component

    First of all import GridOptions form ag-grid for setting up different properties of grid and using them in html pages. Write the following line of code for importing GridOptions in your component.
    1. import {GridOptions} from "ag-grid/main";  
    You have to give the definition of columns and rows as well in component. This data can come from database or from any service call.

    Let us create a simple angular component for using ag-grid in angular 2.

    1. export class AppComponent {  
    2.     public gridOptions: GridOptions; // This is the component variable of type GridOptions  
    3.     public rowData: any[]; // variable that will hold data of rows  
    4.     public columnDefs: any[]; // Grid’s column definiation  
    5.     constructor() {  
    6.         this.gridOptions = < GridOptions > {  
    7.             onGridReady: () => {  
    8.                 this.gridOptions.api.sizeColumnsToFit();  
    9.             }  
    10.         }; //Defining data for columns  
    11.         this.columnDefs = [{  
    12.             headerName: "Name",  
    13.             field: "name"  
    14.         }, {  
    15.             headerName: "Age",  
    16.             field: "age"  
    17.         }]; //Row data  
    18.         this.rowData = [{  
    19.             name: "Test1",  
    20.             age: "23"  
    21.         }, {  
    22.             name: "Test2",  
    23.             age: "24"  
    24.         }];  
    25.     }  
    26. }  

     

    Now we have prepared our component for using ag-grid.

  • Make an html file for ag-grid component.

    Following html code will render a grid on UI.
    1. <ag-grid-angular #agGrid style="width: 500px; height: 150px;" class="ag-fresh"  
    2.                  [gridOptions]="gridOptions"  
    3.                  [columnDefs]="columnDefs"  
    4.                  [rowData]="rowData">  
    5. </ag-grid-angular>  

[gridOptions]  will use settings of GridOptions that is defined in component.

[columnDefs] is bind to columnDefs variable in AppComponent [rowData]   is bind to rowData variable in AppComponent 

Now save all the files.

Run following command.

Npm install ( It will install all required packages for ag-grid and angular)

After successful installation of packages run  thefollowing command.

Npm start

This command will open the results in browser. A simple grid of two columns will be shown in browser.

Angular

You can use different features of ag-grid by exploring the documentation of ag-grid.