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

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'.

1. If 'ag-grid-angular' is an Angular component and it has 'gridOptions' input, then verify that it is part of this module.
2. If 'ag-grid-angular' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

​

Continue reading...