CODEWITHSUNDEEP
angular
Nazanin
Nazanin

Reputation: 227

ag grid won't show correctly in angular

I am trying to use ag-grid bu the result is not correct I don't know what is the problem this is my HTML code

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

this is ts

import { Component, OnInit } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';

@Component({
  selector: 'app-user-access',
  templateUrl: './user-access.component.html',
  styleUrls: ['./user-access.component.css']
})
export class UserAccessComponent implements OnInit {

  columnDefs = [
    {headerName:'make',field: 'make' },
    {headerName:'model',field: 'model' },
    {headerName:'price',field: 'price'}
];

rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
];

  constructor() { }

  ngOnInit(): void {
  }

}

this is CSS

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

I add these imports to style.css too but the result is not ok enter image description here

Upvotes: 3

Views: 4283

Answers (5)

Louis Cribbins
Louis Cribbins

Reputation: 189

What I needed to do is put the links in the global styles.css file for my Angular app. That and also making sure we're not using the 'dist' folder as part of that path like @Shekhar had mentioned.

@import 'ag-grid-community/styles/ag-grid.css';

@import 'ag-grid-community/styles/ag-theme-alpine.css';

Upvotes: 0

Shekhar
Shekhar

Reputation: 11

The correct files to load are located in ag-grid-community/styles or @ag-grid-community/styles if you're using modules.

This path has changed in v28, and the old files are still there as part of the Legacy Styles but will be removed in v29.

to learn more, https://www.ag-grid.com/javascript-data-grid/themes/

Upvotes: 0

Shuheb
Shuheb

Reputation: 2352

Everything looks fine, except it seems you are using the imports intended for SCSS files in styles.css

You should add the following lines if you are using SCSS in styles.scss:

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

If you are importing the themes via CSS, then add this in your index.html file:

<link rel="stylesheet" type="text/css" href="/node_modules/ag-grid-community/dist/styles/ag-grid.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/ag-grid-community/dist/styles/ag-theme-balham.css" />

Upvotes: 3

TotallyNewb
TotallyNewb

Reputation: 4820

I have no prior experience with ag-Grid, but it seems to be directly copied from their stackblitz example which seems to be working. Since the things you've shown us looks the same (beside them using .scss and you having .css styles), I would look in other places:

If it doesn't seem to work correctly for you, verify that you have the same version of both ag-grid-angular and ag-grid-community in your `package.json' file. Perhaps re-run npm install to make sure both packages are actually installed.

Try navigating to the path from which you are serving the ng-grid .css files and make sure they are physically there.

Make sure there are no errors thrown in console when you are loading the application. Make sure there are no errorcs in the angular CLI console when it rebuilds the application.

Upvotes: 1

upinder kumar
upinder kumar

Reputation: 837

Hi try this i think your css import path is not correct.

@import "~@ag-grid-community/core/dist/styles/ag-grid.css";
@import "~@ag-grid-community/core/dist/styles/ag-theme-fresh/sass/ag-theme-fresh.css";

Upvotes: 0

Related Questions