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. ………
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'
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";
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.