Ag-grid and Angular2 using angular-cli

Question

I'm trying to run ag-grid with angular2, the examples in the ag-grid site are using SystemJS as builder, and the new angular-cli uses webpack.

Below I will put the way I'm run, but I'm not using ag-grid-ng2. I don't know where to reference the ag-grid-ng2 in angular-cli.json.

I wanted to use something like this step-by-step:

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 didn't change anything, except what will be described below:

ng new MyProject
cd MyProject
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-test"
      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-test');
    new Grid(<HTMLDivElement>el, this.gridOptions);

    let data: any[] = [];
    data.push({name: 'Name 1'});
    data.push({name: 'Name 2'});
    data.push({name: 'Name 3'});
    this.gridOptions.api.setRowData(data);
  }

}

Thank you.

Answer 1

When using Angular-CLI for Ag-Grid rather than using ag-grid-ng2, I would suggest you use ag-grid-angular. Hope these references would help:

• Ag Grid - Building with Angular CLI
• Ag Grid Angular Example