I'm getting an error message about Can't bind to 'columnDefs' since it isn't a known property of 'ag-grid-angular'
. I have read some suggestions to similar questions but none of the proposed answers solved my issue. My HTML is like this:
<ag-grid-angular class="my-class-here"
...
[columnDefs]="gridColumnDefs"
...
</ag-grid-angular>
My component.ts file has these:
import { ColDef } from 'ag-grid-community';
public gridColumnDefs = myGridColDefs;
Where myGridColDefs
is a variable representing my column definitions. And in my module.ts file I have imported ag-grid like this:
import { AgGridModule } from 'ag-grid-angular';
@NgModule({
imports: [
AgGridModule.withComponents([]),
...
]
})
As far as I can tell I did everything right. What could be causing this error message? FYI I am also getting additional error messages where it's not recognizing ag-grid properties like this:
Can't bind to 'rowData' since it isn't a known property of 'ag-grid-angular'.
1. If 'ag-grid-angular' is an Angular component and it has 'rowData' input, then verify that it is part of this module.
The ag-grid documentation shows HTML like this
<ag-grid-angular
[columnDefs]="columnDefs"
/* other grid options ... */>
</ag-grid-angular>
So I don't understand why I'm experiencing this issue.
The issue turned out to be in my spec.ts file. I needed to add imports and schemas like this:
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
MocksModule,
AnotherModule
],
declarations: [ nameOfMyComponent ],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
]
})
I had seen in some other similar questions and answers something about the schemas: [ CUSTOM_SLEMENTS_SCHEMA, ]
thing suggesting to put a line like that in the module.ts file - I knew that wasn't my problem because I was able to run & debug & display data. In my case I needed the above code in my spec.ts file because I'm running a test command.