Can't bind to 'gridOptions' since it isn't a known property of 'ag-grid-angular' (Angular4)

Question

I have this code in HTML:

<ag-grid-angular [gridOptions]="gridOptions"></ag-grid-angular>

code in Component:

import {GridOptions} from 'ag-grid'; 
...

export class SampleComponent{
   gridOptions: GridOptions;
}
...

app.module.ts:

import {NgModule} from "@angular/core";
import {AgGridModule} from "ag-grid-angular/main";
import {AppComponent} from "./app.component";
...

@NgModule({
    declarations: [...],
    imports: [
        ...
        AgGridModule.withComponents([])
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

What can be the source for the error that I get? Here is the full error:

Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'gridOptions' since it isn't a known property of 'ag-grid-angular'.

If 'ag-grid-angular' is an Angular component and it has 'gridOptions' input, then verify that it is part of this module.

If 'ag-grid-angular' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Possible duplicate of (stackoverflow.com/a/44238887/9775003) — Sanoj_V
@Sanoj_V The solution is that question does not solve my problem. I already have AgGridModule.withComponents([]) in imports. — matchifang
I don't know whether this will help, but in my class that uses ag-grid I have the following import: import { AgGridNg2 } from 'ag-grid-angular'; (I don't have the import of AgGridModule). — Andy King

Sajeetharan Sajeetharan · Accepted Answer · 2018-06-04T17:47:52

Try to initiatlize gridOptions as follows and see

constructor() {
    this.gridOptions = <GridOptions>{};
    this.columnDefinitions = [

    ];

    this.gridOptions = {
      columnDefs: this.columnDefinitions,
      enableFilter: true,
      enableSorting: true,
      pagination: true
    };

    this.rowSelection = 'single';
  }

EDIT

Your actual issue is here, Change

From

<ag-grid-angular [gridOptions]="gridOptions"></ag-grig-angular>

To

<ag-grid-angular [gridOptions]="gridOptions"></ag-grid-angular>

Can't bind to 'gridOptions' since it isn't a known property of 'ag-grid-angular' (Angular4)

2 Answers