4

I'm using Angular 5 with ag-grid 17.x and am just trying to do a simple, "hello world"-type example, but having trouble getting the grid to display appropriately. I have the following HTML in my template:

<div style="width: 800px; height: 500px" class="ag-theme-balham">
  <ag-grid-angular
                   [rowData]="rowData"
                   [columnDefs]="columnDefs">
  </ag-grid-angular>
</div>

...and I don't get any errors, but instead of a grid, it's just rendered as one jumbled column of text.

Anyway, I noticed in dev tools that the styles that the grid was pointing to weren't there, so I imported them in the .angular-cli.json:

  "styles": [
    "scss/styles.scss",
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/ag-theme-balhom.css"
  ],

...and this worked, but the solution doesn't seem right to me. I tried to import them in one of my .scss files:

@import '~ag-grid/src/styles/ag-grid.scss';
@import '~ag-grid/src/styles/ag-theme-fresh.scss';

...but got a bunch of reference errors (couldn't find icons, etc.).

My question is how should ag-grid styles and themes be imported into an Angular application? I've dug around in the documentation, but can't seem to find the solution that I stumbled upon, so assume it's wrong...but can't find anything that works either. Thanks for any help!enter image description here

throp
  • 696
  • 7
  • 10

1 Answers1

3

The link @koolhuman has provided is correct, I would like to add two points on top of that.

  1. You should keep your styles.scss file reference at the last in styles array in .angular-cli.json file. The ag-grid styles you want to override will be overridden if you keep styles.scss before ag-grid styles.

  2. Add class="ag-theme-balhom" or class="ag-theme-fresh" on you <ag-grid-angular> element. In short, whichever theme you want to apply.

Paritosh
  • 11,144
  • 5
  • 56
  • 74