Search code examples
angularag-gridag-grid-angular

Can't bind to 'columnDefs' since it isn't a known property of 'ag-grid-angular'


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.


Solution

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