Ag-grid and Angular2 using angular-cli

Question

I am trying to run ag-grid using angular2, the ag-grid site examples use SystemJS as a builder, and the new angular-cli uses a web package.

Below I will put the way that I start, but I do not use ag-grid-ng2. I don't know where to access ag-grid-ng2 in angular-cli.json.

I wanted to use something like this step by step:

I use:

• 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 did not 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.

Answer 1

Angular -CLI Ag-Grid ag-grid-ng2, ag-grid-angular. , :

• Ag Grid - Angular CLI
• Ag Grid Angular