angular ag grid not working with angular 5 - angular5

Question

I want to use ag-grid in my angular 5 application
but I am unable to use as it throws an exception in my console.
My component code:
columnDefs = [
{headerName: "First Name", field: "first_name", width: 100, editable: true},
{headerName: "Last Name", field: "last_name", width: 100, editable: true},
{
headerName: "Gender",
field: "gender",
width: 90,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Age",
field: "age",
width: 70,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Mood",
field: "mood",
width: 70,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Country",
field: "country",
width: 100,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Address",
field: "address",
width: 502,
cellEditor: 'mySimpleCellEditor'
}
];
rowData = [
{
first_name: 'Bob', last_name: 'Harrison', gender: 'Male',
address: '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401)
747-0763',
mood: "Happy", country: 'Ireland'
},
];
My html code:
<div>
<ag-grid-angular #aggrid style="width: 100%; height: 350px;"
class="ag-theme-balham"
[columndefs]="columnDefs"
[showtoolpanel]="true"
[rowdata]="rowData"
enablecolresize
enablesorting
enablefilter
rowheight="22"
rowselection="multiple">
</ag-grid-angular>
</div>
My app.module.ts code:
import { AgGridModule } from "ag-grid-angular/main";
imports: [
AgGridModule.withComponents([])
],
I am still getting the below error in my console and I am unable to run my application.
(anonymous) # bootstrap.min.js:6
compiler.js:215 Uncaught Error: Template parse errors:
Can't bind to 'columndefs' since it isn't a known property of 'ag-grid-
angular'.
1. If 'ag-grid-angular' is an Angular component and it has 'columndefs'
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.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas'
of this component. ("id-angular #aggrid style="width: 100%; height: 350px;"
class="ag-theme-balham"
[ERROR ->][columndefs]="columnDefs"
[showtoolpanel]="true"
[rowdata]="): ng:///AppModule/GridtestComponent.html#3:21
Can't bind to 'showtoolpanel' since it isn't a known property of 'ag-
grid-angular'.
1. If 'ag-grid-angular' is an Angular component and it has 'showtoolpanel'
input, then verify that it is part of this module.
I tried almost everything but still not able to resolve this issue.

Answer 1

How about instead of using...
[columndefs]="columnDefs"
[rowdata]="rowData"
You use...
[columnDefs]="columnDefs"
[rowData]="rowData"
Also, basically nothing - except address - in your rowdata matches the field names of your headers. AgGrid won't render data when it has no matching header for those. Please don't try to simply insert code at random. The main page has an easily accessible Get Started page.

Answer 2

You need import in app.module this:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '#angular/core';
#NgModule({
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
NO_ERRORS_SCHEMA
],
...