AG Grid showing in a wrong way Angular 4

Question

I am using following AG Grid version;

ag-grid@17.1.1
ag-grid-angular@17.1.0

I am following the getting started part of the ag-grid site itself.

And my code is as follow;

In app.module.ts:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { RouterModule } from '@angular/router';
    import { HttpClientModule } from '@angular/common/http';
    import { FormsModule } from '@angular/forms';

    import { AppComponent } from './app.component';

    import { AgGridModule } from 'ag-grid-angular';

    @NgModule({
      declarations: [
        AppComponent
      ],

      imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule,
        AgGridModule.withComponents([]),
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

And in the component itself;

    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-table',
      templateUrl: './app-table.component.html',
      styleUrls: [
        './adwalnut-table.component.css',
        './../../../node_modules/ag-grid/dist/styles/ag-grid.css',
        './../../../node_modules/ag-grid/dist/styles/ag-theme-balham.css'
      ]
    })
    export class AppTableComponent implements OnInit {

      columnDefs;
      rowData;

      constructor() { }

      ngOnInit() {

        this.columnDefs = [
            {headerName: 'Make', field: 'make' },
            {headerName: 'Model', field: 'model' },
            {headerName: 'Price', field: 'price'}
        ];

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

    }

My HTML is like;

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

Now my output is like;

Now I checked and noticed that there is no error in console. I followed exact same step that is provided into their getting started guideline, except I am using css not SCSS or SASS.

Is it an issue with version? I am trying for a long time. Any help will be very good for me.

Thanks in advance.

Possible duplicate of [How to include ag-grid styles for Angular 5?](https://stackoverflow.com/questions/49654604/how-to-include-ag-grid-styles-for-angular-5) — Paritosh, May 29 '18 at 04:54

score 1 · Answer 1 · answered May 27 '18 at 22:10

It looks as though you haven't set up the configuration completely. I have the following in my angular.json file in the architect -> build -> options block:

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

At the beginning of the styles.css file in the root of my project I have:

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

And in ag-grid-local.scss, also in the root of my project, I have:

// Customize the look and feel of the grid with Sass variables
// Up-to-date list of variables is available in the source code:
//   https://github.com/ag-grid/ag-grid/blob/master/src/styles/ag-theme-material.scss

$icons-path: '~ag-grid/src/styles/icons/';

$border-color: #0000ff;

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

You can, of course, use the Balham theme instead.

Thanks. Moving CSS import lines into global style sheet file worked for me. — KOUSIK MANDAL, May 28 '18 at 03:15

AG Grid showing in a wrong way Angular 4

1 Answers1