peterc peterc - 5 months ago 138
AngularJS Question

Error when trying to use ag-grid in ionic2

I am new to Ionic 2 and to AG-grid. I have been playing with an example ionic 2 template (sidemenu), and imported into Visual Studio 2015. All seems to run fine.

I want to find a data grid to use, and came across ag-grid. so wanted to explore this in Ionic 2 application.

Following the instructions here, I've installed the node package, so I have the following in my package.json

"ag-grid": "^4.2.7",
"ag-grid-ng2": "^4.2.2",


I have imported into the test .ts file and included the directive ..

...
import {AgGridNg2} from 'ag-grid-ng2/main'
import {GridOptions} from 'ag-grid/main'

@Component({
directives: [AgGridNg2],
templateUrl: 'build/pages/aggrid-page/aggrid-page.html'
})
export class AgGridPage {
public data: Array<GridRow>;
public columnDefs;
public gridOptions: any;
public showToolPanel;
...


Now, I am not sure what to do with the line than mention the SystemX..

System.config({
packages: {
lib: {
...


so I have not done anything there.

I've also included the css files in index.html

<link href="../node_modules/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" />
<link href="../node_modules/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet" />


and I am getting 404 for these (not sure why, as the path seem correct).

The biggest error is the ag-grid tag creates an error.

So as per the example I have the following in my page html..

<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[showToolPanel]="showToolPanel"
[rowData]="rowData"

// boolean values 'turned on'
enableColResize
enableSorting
enableFilter

// simple values, not bound
rowHeight="22"
rowSelection="multiple">
</ag-grid-ng2>


However, when I run (using ionic serve), I get the following error..

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Unexpected closing tag "ag-grid-ng2" ("


[ERROR ->]</ag-grid-ng2>
</ion-content>
"): AgGridPage@31:2


So it's not liking the ag-grid-ng2 tag, so I have not set something up right.

Does anyone know if there are more step involved in integrating this ag-grid to Ionic? IS there something more that needs to include the ag-grid lib files into app.bundle.js?

Thank in advance for any help

Answer

You're missing the closing bracket >:

  rowHeight="22"
  rowSelection="multiple"> <=== here
</ag-grid-ng2>