New to Kendo UI for Angular? Start a free 30-day trial
ItemTemplateDirective
Allows customizing the list item content. To define an item template, nest an <ng-template>
tag
with the kendoListViewItemTemplate
directive inside the <kendo-listview>
tag
(see example).
The following values are available as context variables:
let-dataItem="dataItem"
(any
)&mdashThe current data item. Also available as implicit context variable.let-index="index"
(number
)&mdashThe current item index.let-isFirst="isFirst"
(boolean
)&mdashIndicates whether the current data item renders as the first item on the list.let-isLast="isLast"
(boolean
)&mdashIndicates whether the current data item renders as the last item on the list.
typescript
@Component({
template: `
<kendo-listview [data]="items">
<ng-template kendoListViewItemTemplate let-dataItem let-index="index">
<div class="item-wrapper">
<h4>{{ dataItem.name }}</h4>
<p>Item #{{ index + 1 }}: {{ dataItem.description }}</p>
</div>
</ng-template>
</kendo-listview>
`
})
export class AppComponent { }
Selector
[kendoListViewItemTemplate]