CODEWITHSUNDEEP
angularjsionic-frameworkangularionic2ag-grid
peterc
peterc

Reputation: 7873

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

Upvotes: 1

Views: 975

Answers (2)

J&#252;rgen &#39;Kashban&#39; Wahlmann
J&#252;rgen &#39;Kashban&#39; Wahlmann

Reputation: 1539

With respect to the stylesheets: You either need to change your gulp task to include them in the build (stylesheets are not included by default) or as I did copy or symlink both css files to your app/themes directory, rename them as *.scss and import them into app.core.scss. They will then be included into your app css in build/css.

Example: 

@import "./ag-grid";
@import "./theme-fresh";

Upvotes: 0

yurzui
yurzui

Reputation: 214125

You're missing the closing bracket >:

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

Upvotes: 1

Related Questions