Search code examples
angularag-gridag-grid-angular

ag-grid example doesn't display properly

Was trying to implement ag-grid in my project, but I encountered some issues.

Started with "Get started" (https://www.ag-grid.com/angular-grid/) example, but it isn't working like intended.

Made even new angular project, but encountered same issue.

Printescreen with the issue

Dependencies:

"dependencies": {
    "@angular/animations": "~9.0.0",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/router": "~9.0.0",
    "ag-grid-angular": "^22.1.1",
    "ag-grid-community": "^22.1.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

Any ideas what might be the issue?

Solution

  • I think you didnt inject the style of ng-grid in your style.scss, if tha the case add this two lines t your style.scss : 

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

    and add the class of the theme like this : 

    <ag-grid-angular
class="ag-theme-balham"
.
.
.
></ag-grid-angular>