CODEWITHSUNDEEP
angularag-grid
marc_s
marc_s

Reputation: 754388

Getting Started demo for ag-grid - not showing grid as expected

I'm trying to get a handle on the "ag-grid" Typescript grid component for my Angular 6 apps.

The website looks very promising, and I've been trying to get their "Getting Started" demo to work on my machine - without any luck so far.

I've gone through the setup steps - with one exception: I tried to use "straight" CSS (instead of going with SCSS) - and thus I have this in my app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css',
              '../../node_modules/ag-grid-community/dist/styles/ag-grid.css',
              '../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css',
             ]
})

instead of their approach of importing the CSS in the styles.scss file:

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

Not sure, if that's the root cause of the problem - but my data appears on screen very garbled and not in a grid at all .... (tried in both Chrome and Edge - same result):

enter image description here

Upvotes: 2

Views: 1535

Answers (2)

Дмитрий Тишин
Дмитрий Тишин

Reputation: 41

Today I've forgotten to replace ag-theme-alpine to ag-theme-balham in parent div.

Upvotes: 0

Ludevik
Ludevik

Reputation: 7254

You should add the styles to your angular.json file:

"styles": [ "node_modules/ag-grid-community/dist/styles/ag-grid.css", "node_modules/ag-grid-community/dist/styles/ag-theme-balham.css" ]

See stackblitz demo.

Upvotes: 2

Related Questions