Step 1:
First of all, you need to add dependencies to your project. In package.json add the following code:
"dependencies": { ... "ag-grid": "6.1.0", "ag-grid-ng2": "6.1.0" }
Make sure the latest version of ag-Grid is installed.
Step 2:
Update System.config.js to use ag-grid in your project.
System.config({ packages: { ... 'ag-grid-ng2': { defaultExtension: "js" }, 'ag-grid': { defaultExtension: "js" } }, map: { ... 'ag-grid-ng2': 'node_modules/ag-grid-ng2', 'ag-grid': 'node_modules/ag-grid' } });
Step 3:
Import the AgGridModule into the module in which you want to use it.
import {AgGridModule} from 'ag-grid-ng2/main'; @NgModule({ imports: [ BrowserModule, AgGridModule.forRoot(), ... })
forRoot - ensure that AgGrid providers are introduced at the root level.
Step 4:
And the last thing you need to enable CSS for ag-Grid. You can do it right in your index.html
<link href="node_modules/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" /> <link href="node_modules/ag-grid/dist/styles/theme-material.css" rel="stylesheet" />
Here it is. Setup completed.
Let's move on to the implementation
Create the component in which you want to use your grid.
@Component({ selector: 'ag-grid', template: ` <ag-grid-ng2 style="width: 80%; margin-left: 10%" #agGrid class="ag-material" [gridOptions]="myGridOptions"> </ag-grid-ng2>` }) **export class MyGridComponent{ }**
In the template we have a tag. This is provided by previously imported AgGridModule. Note the property "gridOptions", we assigned it to the variable "myGridOptions", and therefore we need to initialize this variable in the component. Add the following code to the component:
private myGridOptions: GridOptions = {};
This initializes an empty grid. Now, obviously, we need some data in our grid.
To add a date to ag-Grid, we have two GridOptions properties:
rowData columnDefs
we can initialize both of them to ngOninit. Import OnInit and add it to the component and add the following code:
import { OnInit } from '@angular/core'; export class MyGridComponent implements OnInit{ ngOnInit() { this.myGridOptions.rowData = this.createRowData(); this.myGridOptions.columnDefs = this.createColumnDefs(); } private createColumnDefs() { return [ {headerName: "NAME", field: "name", width: 100}, {headerName: "AGE", field: "age", width: 100}, {headerName: "GENDER", field: "gender", width: 100} ] }
// data are mapped to the corresponding field header key
private createRowData() { return [ {name: "Geller", age: 30, gender: "Male"}, {name: "Geller", age: 28, gender: "Female"}, {name: "Tribbiani", age: 29, gender: "Male"}, {name: "Bing", age: 30, gender: "Male"}, {name: "Green", age: 28, gender: "Female"}, {name: "Buffay", age: 29, gender: "Female"} ]; } }
Here we have two methods that add headers and row data to the grid.
Here's what your grid looks like:
blog1_1
We use a material theme, but you can choose the one you like here.
Now, in the general case, you will receive this data from the service. Let's create a service layout for this. But before that, we must create a type for our data.
Create the "friends.ts" file and create the Friends class as follows:
export class Friends{ name: string; age: number; gender: string; }
Now for the breadboard service, create the friends.service.ts file and add the following code:
import {Friends} from "./friends"; export class FriendsService{ getDate() { let friends: Friends[] = [ {name: "Geller", age: 30, gender: "Male"}, {name: "Geller", age: 28, gender: "Female"}, {name: "Tribbiani", age: 29, gender: "Male"}, {name: "Bing", age: 30, gender: "Male"}, {name: "Green", age: 28, gender: "Female"}, {name: "Buffay", age: 29, gender: "Female"}, ]; return friends } }
To use the service, add it to the vendors section of your ngModule.
Now we need to update our methods in the component. Rows will be directly displayed because the rowData property needs an array of any type, so all we need to do is update the createColumnDefs method.
constructor(private friendsService: FriendsService){} ngOnInit() { let data: Friends[] = this.friendsService.getDate(); this.myGridOptions.rowData = data; this.myGridOptions.columnDefs = this.createColumnDefs(data[0]); } private createColumnDefs(friends: Friends) { let keyNames = Object.keys(friends); let headers = []; keyNames.map(key => { headers.push({ headerName: key.toUpperCase(), field: key, width: 100 }) }); return headers; }
We simply extract the keys from the data, add properties such as width and field, and insert them into the array.