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.

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