ag-grid in jhipster angular 4 - jhipster

Question

i'm trying to use ag-grid in a jhipster project. After adding ag-grid to my project, I imported the module in app.module:
{AgGridModule} from 'ag-grid-angular';
i modified the component in order to use ag-grid:
import { Component, OnInit, OnDestroy } from '#angular/core';
import { ActivatedRoute, Router } from '#angular/router';
import { Subscription } from 'rxjs/Rx';
import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';
import { Typapp } from './typapp.model';
import { TypappService } from './typapp.service';
import { ITEMS_PER_PAGE, Principal, ResponseWrapper } from '../../shared';
import {ColDef, ColumnApi, GridApi} from 'ag-grid';
#Component({
selector: 'jhi-typapp',
templateUrl: './typapp.component.html'
})
export class TypappComponent implements OnInit, OnDestroy {
typapps: Typapp[];
typs: Typapp[]
currentAccount: any;
eventSubscriber: Subscription;
/**
* Declarations AG-GRID
*/
// rowdata and column definitions
rowData: Typapp[];
columnDefs: ColDef[];
// gridApi and columnApi
api: GridApi;
columnApi: ColumnApi;
constructor(
private typappService: TypappService,
private jhiAlertService: JhiAlertService,
private eventManager: JhiEventManager,
private principal: Principal
) {
this.columnDefs = this.createColumnDefs();
}
loadAll() {
this.typappService.query().subscribe(
(res: ResponseWrapper) => {
this.typapps = res.json;
},
(res: ResponseWrapper) => this.onError(res.json)
);
}
ngOnInit() {
this.loadAll();
this.principal.identity().then((account) => {
this.currentAccount = account;
});
this.registerChangeInTypapps();
/**
* modif component aggrid
*/
this.typappService.findAll().subscribe(
(rowData) => {
this.rowData = rowData
},
(error) => {
console.log(error);
}
)
}
ngOnDestroy() {
this.eventManager.destroy(this.eventSubscriber);
}
trackId(index: number, item: Typapp) {
return item.id;
}
registerChangeInTypapps() {
this.eventSubscriber = this.eventManager.subscribe('typappListModification', (response) => this.loadAll());
}
private onError(error) {
this.jhiAlertService.error(error.message, null, null);
}
/**
* AG GRID fonctions
*/
// one grid initialisation, grap the APIs and auto resize the columns to fit the available space
onGridReady(params): void {
this.api = params.api;
this.columnApi = params.columnApi;
this.api.sizeColumnsToFit();
}
// create some simple column definitions
private createColumnDefs() {
return [
{field: 'id'},
{field: 'libTyp'},
]
}
}
there is the code of component.html
<h6> without AGRID</h6>
<div *ngFor="let rd of rowData">
<span>{{rd.id}}</span>
<span>{{rd.libTyp}}</span>
</div>
<br/>
<h6> with AGRID</h6>
<ag-grid-angular style="width: 100%; height: 800px;"
class="ag-theme-fresh"
(gridReady)="onGridReady($event)"
[columnDefs]="columnDefs"
[rowData]="rowData">
</ag-grid-angular>
and this is the result:
What i'm doing wrong? why there is no results when i use ag-grid?
Even in the console there is no error.
Thank you very much.

Answer 1

I had the same issue. Did you import ag-theme-fresh.css to vendor.css? This did the trick for me.
\src\main\webapp\content\css\vendor.css:
...
#import '~ag-grid/dist/styles/ag-theme-fresh.css';