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]

})

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

exportclass AppComponent {

public gridOptions: GridOptions; // This is the component variable of type GridOptions