IGX GRID: ng-template for igx-column giving error

[KaushikEDS]

This is my code for igx-grid

<igx-grid #grid1 [data]="data " [autoGenerate]="false">
<ng-container *ngFor="let column of columns" [ngTemplateOutlet]="columnTemplate" [ngTemplateOutletContext]="{column: column}">

<ng-template #columnTemplate let-column="column">
<igx-column [header]="column.name" [field]="column.prop" [sortable]="column.sortable" [width]="column.width"
[resizable]="column.resizable" [pinned]="column.pinned" [dataType]="column.dataType" [hidden]="column.hidden"
[movable]="column.movable" [cellStyles]="cellStyle" [hasSummary]="column.hasSummary" [editable]="false"
[groupable]="true">

It gives me the error

My package.json has

{
"@angular/animations": "~13.3.6",
"@angular/cdk": "^13.3.2",
"@angular/common": "~13.3.6",
"@angular/compiler": "~13.3.6",
"@angular/core": "~13.3.6",
"@angular/flex-layout": "^12.0.0-beta.35",
"@angular/forms": "~13.3.6",
"@angular/material": "^13.3.2",
"@angular/material-moment-adapter": "^13.3.2",
"@angular/platform-browser": "~13.3.6",
"@angular/platform-browser-dynamic": "~13.3.6",
"@angular/router": "~13.3.6",
"igniteui-angular-charts": "^13.0.0",
"igniteui-angular-core": "^13.0.0",
}

[ddaribo]

Hi @KaushikEDS,

Please, note that version 13.x. of Ignite UI for Angular is long out of support. The currently supported versions are 17.1.x and 16.1.x. More about our versioning can be found in this Wiki page.

Additionally, in the excerpt of the package.json you provided, I am not seeing the igniteui-angular package, which is the one containing the igx-grid. Please, make sure this package is installed.

Now to address your specific issue, regardless of the package version, the error is occurring as the igx-columns are attempted to be rendered in a custom template. However, the IgxColumnComponent expects to be defined in an IgxGridComponent, which causes the error.

To resolve this, the columns need to be iterated directly within the grid:

<igx-grid #grid1 [data]="data " [autoGenerate]="false">
    <igx-column *ngFor="let column of columns" [header]="column.name" [field]="column.prop" … ></igx-column>
</igx-grid>

Please, test this approach and let me know if you need any further assistance on the matter.

[KaushikEDS]

@ddaribo Yes *ngFor works
I wanted to use template because I wanted to reuse certain column configurations.
I will find a workaround for that.