'Angular Ag-Grid not displaying correctly

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

I've followed these tutorials

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)

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

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";

Solution 1:^[1]

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";

Solution 2:^[2]

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.

Solution 3:^[3]

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>

Solution 4:^[4]

Post it here since this is the first result in Google search.

Had the same issue: React + Storybook are not displaying correctly ag-grid with dark/light custom themes.

Putting default @import "~ag-grid-community/dist/styles/ag-grid"; into common style.css fixed the issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Krishna
Solution 2
Solution 3	mohammad saghali
Solution 4	Andrey Tinyakov

'Angular Ag-Grid not displaying correctly

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]