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.

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
  

  "dependencies": {
  …..
  "ag-grid": "12.0.x",
  "ag-grid-angular": "12.0.x",
  "ag-grid-enterprise": "12.0.x",
  ………
  
  }

• Update the systems.config.js file as following
  

  map: {
     'ag-grid-angular': 'node_modules/ag-grid-angular',
  'ag-grid': 'node_modules/ag-grid',
  'ag-grid-enterprise': 'node_modules/ag-grid-enterprise'
  
  }

• Import ag-grid module in your application app module
  

  import {NgModule} from "@angular/core";
  import {BrowserModule} from "@angular/platform-browser";
  // ag-grid
  import {AgGridModule} from "ag-grid-angular/main";
  // application
  import {AppComponent} from "./app.component";
  
  @NgModule({
      imports: [
          BrowserModule,
          AgGridModule
      ],
      declarations: [
          AppComponent
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule {
  }

• 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.
  

  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.

  export class AppComponent {
      public gridOptions: GridOptions; // This is the component variable of type GridOptions
      public rowData: any[]; // variable that will hold data of rows
      public columnDefs: any[]; // Grid’s column definiation
      constructor() {
          this.gridOptions = < GridOptions > {
              onGridReady: () => {
                  this.gridOptions.api.sizeColumnsToFit();
              }
          }; //Defining data for columns
          this.columnDefs = [{
              headerName: "Name",
              field: "name"
          }, {
              headerName: "Age",
              field: "age"
          }]; //Row data
          this.rowData = [{
              name: "Test1",
              age: "23"
          }, {
              name: "Test2",
              age: "24"
          }];
      }
  }

   

  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.
  

  <ag-grid-angular #agGrid style="width: 500px; height: 150px;" class="ag-fresh"
                   [gridOptions]="gridOptions"
                   [columnDefs]="columnDefs"
                   [rowData]="rowData">
  </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.

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