Templates
The ListView enables you to define its content by utilizing the provided list item, header, footer, and loader templates.
Item Template
To provide a template for each item that will be rendered in the ListView, nest an <ng-template>
tag with the kendoListViewItemTemplate directive inside a <kendo-listview> tag.
The following values are available as context variables:
let-dataItem="dataItem"(any)—The current data item. Also available as an implicit context variable.let-index="index"(number)—The current item index.let-isFirst="isFirst"(boolean)—Indicates whether the current data item will be rendered as the first item on the list.let-isLast="isLast"(boolean)—Indicates whether the current data item will be rendered as the last item on the list.
The following example demonstrates the kendoListViewItemTemplate directive in action.
Header Template
To render a header section above the content container of the ListView, nest an <ng-template>
tag with the kendoListViewHeaderTemplate directive inside a <kendo-listview> tag.
The following example demonstrates how to add a filter input in the header of the ListView.
Footer Template
To render a footer section below the content container of the ListView, nest an <ng-template>
tag with the kendoListViewFooterTemplate directive inside a <kendo-listview> tag.
The following example demonstrates how to add a metadata section and a Reload data button in the footer of the ListView.
Loader Template
When the loading property of the ListView is set to true, the ListView will display its built-in loading indicator (see example).
To render a custom loading indicator inside the content area of the ListView, nest an <ng-template>
tag with the kendoListViewLoaderTemplate directive inside a <kendo-listview> tag.
The following example demonstrates how to integrate the Kendo UI for Angular Loader component in the ListView.