Through the fields input, you can set up column with custom template, following the following steps:
Add the column in the ColumnConfig array:
sample.component.ts
...import {AfterViewInit, ViewChild} from'@angular/core';...import {ColumnConfig, ViewType} from'@valtimo/components';...// For custom templates, the fields need to be set after the view was initializedexportclassSampleComponentimplementsAfterViewInit {...@ViewChild('sampleId') public sampleTemplate:TemplateRef<any>;public fields:Array<ColumnConfig>;...publicngAfterViewInit():void {...this.fields = [ { viewType:ViewType.TEXT, key:'title', label:'sample.translation.title', }, { viewType:ViewType.TEXT, key:'description', label:'sample.translation.description', }, { viewType:ViewType.TEMPLATE, template:this.sampleTemplate, key:'', label:'Sample title', }, ];...}...}
Add your template in the HTML of the component
sample.component.html
<valtimo-carbon-list
[items]="items"
[fields]="fields"
></valtimo-carbon-list>
...
// The "data" field in the template contains the item of the row, the index of the item in the list and the length of the list
<ng-template #sampleTemplate let-data="data">
Custom: {{data.item.title}} - {{data.item.description}} - {{data.index}} - {{data.length}}
</ng-template>