Have you checked the documentation above? :) There is a section explaining exactly this, how to bind complex data or visualize a composite data with a custom template.
You have two options:
- Use the `value` of the cell, that containes the nested data
- Use the `cell` object in the template from which to access the `row.data` and retrieve any value from it.
I have created a sample showcasing this:
And a code snippet:
<igx-column field="abbreviation.long" header="Long">
<ng-template igxCell let-cell="cell">
<div>
<div>
{{ cell.value }}
{{ cell.row.data['name'] }}
{{ cell.row.data['abbreviation']['short'] }}
</div>
</div>
</ng-template>
</igx-column>
Data:
export const AMINO_DATA = [
{
name: 'Alanine',
abbreviation: {
short: 'A',
long: 'Ala'
},
weight: {
molecular: 89.10,
residue: 71.08
},
formula: {
molecular: 'C3H7NO2',
residue: 'C3H5NO'
},
p: {
Ka: 2.34,
Kb: 9.69,
Kx: null,
l: 6.00
}
}...
....
