I'm trying to run ag-grid with angular2, the examples you have on the ag-grid site are using SystemJS as builder, and the new angular-cli uses webpack.
Below I'll put the way I managed to run, but in the way below I'm not using ag-grid-ng2. I do not know where to reference the extra library of ag-grid-ng2.
I wanted to use something like this step-by-step: link
I'm using:
- Node: 6.9.2
- NPM: 4.0.5
- Typescript: 2.1.4
- Angular CLI: 1.0.0-beta.22-1
- Ag-Grid: 7.0.2
I used the following commands to start the project, and I did not change anything except what will be described below:
ng new MeuProjeto
cd MeuProjeto
npm install --save ag-grid
npm install --save ag-grid-ng2
Then I edited the file 'angular-cli.json':
"styles": [
"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/theme-blue.css",
"styles.css"
],
"scripts": [
"../node_modules/ag-grid/dist/ag-grid.js"
],
File: app.component.html
<h1>
{{title}}
</h1>
<div id="grid-teste"
style="height: 250px;"
class="ag-blue">
</div>
File: app.component.ts
import { Component, OnInit } from '@angular/core';
import { Grid, GridOptions } from "ag-grid/main";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app works!';
gridOptions: GridOptions;
constructor() {
}
ngOnInit() {
this.gridOptions = <GridOptions>{};
this.gridOptions.columnDefs = [];
this.gridOptions.columnDefs.push({ headerName: 'name', field: 'name' });
var el = document.querySelector('#grid-teste');
new Grid(<HTMLDivElement>el, this.gridOptions);
let data: any[] = [];
data.push({name: 'Nome 1'});
data.push({name: 'Nome 2'});
data.push({name: 'Nome 3'});
this.gridOptions.api.setRowData(data);
}
}
Thank you.