1

As of angular-compiler version 1.0.0-Beta.19-3, angular version 2.2.3, and ag-grid version 7.0.2 the column headers stack on top of each other like mentioned in this stackoverflow post.

The grey line at the bottom of the grid keeps moving downwards and the data is stacked on top of itself in one column.

enter image description here

I am having this problem with the Angular 2 component version of the grid. Tomorrow I will be trying the pure Javascript version.

Has anyone here successfully got the grid to work in Angular 2 using the AngularCLI with Webpack?

Community
  • 1
  • 1
Kent Bull
  • 1,144
  • 3
  • 21
  • 41
  • I have gotten it working, are you including the CSS file in `angular-cli.json` under `app[0].styles`? – Brocco Dec 16 '16 at 04:44
  • I didn't try that yet. I just imported the CSS file in my styles.css file. Have you tried that? – Kent Bull Dec 16 '16 at 05:12
  • @Brocco do you have a sample webpack and angular-cli config that you'd be willing to share for this? – Sean Landsman Dec 16 '16 at 08:32
  • @SeanLandsman I posted my setup as an answer below – Brocco Dec 16 '16 at 14:55
  • 1
    Just a quick note here - setting up ag-grid with angular-cli was pretty straightforward (h/t to @brocco) in the end. There will be a new project example available from tomorrow @ the ag-grid-ng2-example repo that illustrates this – Sean Landsman Dec 21 '16 at 16:48
  • @SeanLandsman Thanks! ping me on twitter when that's up... I'll tweet about it once you have it up.... https://twitter.com/Brocco – Brocco Dec 21 '16 at 17:59

3 Answers3

4

Here are the steps I've followed to get ag-grid working with Angular

  • npm i ag-grid --save
  • npm i ag-grid-ng2 --save
  • In angular-cli.json under apps -> styles:
    • ../node_modules/ag-grid/dist/styles/ag-grid.css
    • ../node_modules/ag-grid/dist/styles/theme-bootstrap.css
  • In your NgModule
    • import { AgGridModule } from 'ag-grid-ng2/main';
    • @NgModule({ imports: [ ... AgGridModule.withComponents([])...
  • In your component's template:
    • <ag-grid-ng2 ...
Brocco
  • 62,737
  • 12
  • 70
  • 76
1

There are now examples or using ag-Grid with either SystemJS, Webpack or AngularCLI - the examples project can be found here: https://github.com/ceolter/ag-grid-ng2-example

h/t to @brocco for the pointers above

Sean Landsman
  • 7,033
  • 2
  • 29
  • 33
0

A couple of extra points.

In @angular/cli@1.0.0-rc.2, the file you want is ".angular-cli.json"; note the beginning dot. It is in the project root directory. Use ls -a.

If you are running "ng serve", you must stop and restart it for the changes to go into effect.

Mark Davoren
  • 23
  • 5