How to include ag-grid styles for Angular 5?

问题

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!

回答1:

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

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

来源：https://stackoverflow.com/questions/49654604/how-to-include-ag-grid-styles-for-angular-5

标签

ag-grid

ag-grid-ng2