I am just investigating this grid, and am trying to work out how to use a "cell template" from code.
Using their tree-grid-conditional-cell-style-2 sample, I have put the following:
<ng-template #bodyTemplate igxCell let-val>
<div style="background-color: rgb(50, 205, 63)">
<span> from template {{val}} </span>
</div>
</ng-template>
<igx-tree-grid igxPreventDocumentScroll
#grid1 [data]="data"
primaryKey="ID" foreignKey="ParentID"
height="350px">
<igx-column *ngFor="let c of columns"
[field]="c.field"
[header]="c.header? c.header : c.field"
[cellStyles]="c.cellStyles"
[bodyTemplate]="c.bodyTemplate">
</igx-column>
</igx-tree-grid>
And in the TypeScript code I have
@ViewChild('bodyTemplate', { read: TemplateRef })
public bodyTemplate: TemplateRef<any>;
...
public ngAfterViewInit() {
this.data = FOODS_DATA();
this.columns = [
{ field: 'ID', header: 'The ID' },
{ field: 'Name', bodyTemplate: this.bodyTemplate }, // <-- trying to use template
{ field: 'UnitPrice' },
{ field: 'AddedDate' },
{ field: 'Extra' }
];
There are no errors, but the template is not being applied in the UI.
I am assuming it is bodyTemplate column property we use.
Why is this not working?
Update
I could get this to work by using cellTemplate in the markup:
<igx-column *ngFor="let c of columns"
[field]="c.field"
[header]="c.header? c.header : c.field"
[cellTemplate]="c.bodyTemplate"> <--------------
</igx-column>
I did not find this as I was trying to type my columns, ie in the code behind I have public columns: Partial<IgxColumnComponent>[];
But cellTemplate does not seem to be a member of IgxColumnComponent?
So not sure why this is (as it works)?
