Angular Ag-Grid not displaying correctly

6
votes

I'm trying to use Angular Ag-Grid in my Web Application.

I've followed these tutorials

  1. Angular Grid | Get Started with ag-Grid

  2. ag-Grid Angular Component

Problem / Issue I Follwed every thing exactly. Even data is being loaded in grid but View is not very appreciable. Here what I'm getting (not alignment, no coloring) enter image description here

What I tried I search extensively over Google and Stack Overflow. Some Answers recommend that CSS is not loading Properly ( which is solid argument) but I double check my import statements on Component.css and Also tried adding .css reference in index.html. The .css files which I refer are exists and reference was also good.

What I Expect

enter image description here

Codes

appComponent.html

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

appComponent.ts

import { Component } from '@angular/core';
import { Grid } from 'ag-grid/main';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  title = 'Grid1';
  columnDefs = [
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" },
  ];

  rowData = [
    { make: "Toyota", model: "m1", price: 35351 },
    { make: "Ford", model: "m2", price: 6546 },
    { make: "M3", model: "m3", price: 646 },
    { make: "M765", model: "m4", price: 56486 }
  ]
}

app.component.scss

@import "~ag-grid/dist/styles/ag-grid.css";
@import "~ag-grid/dist/styles/ag-theme-balham.css";

I Also tried other tutorial which says this app.component.scss

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
3
angularangular8ag-grid-angular

3 Answers

15
votes

Ag Grid styles should be imported in styles.scss not in app.component.scss

So try to import in styles.scss and check:

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
0
votes

I encountered quite a different but similar situation in that after configuring and integrating agGrid, the features work as expected but the display doesn't render really well. For instance, the sorting and filter icon doesn't render, checkbox not displaying when enabled.

I realized it was because I selected a different theme in the HTML from the one imported in the global style.css/scss.

0
votes

first you must be add related modules in app.module.ts
after that you can add directly CSS sources in your html file
like this:

app.component.html

<head>
  <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
  <link
    rel="stylesheet"
    href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"
  />
  <link
    rel="stylesheet"
    href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css"
  />
</head>

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