Templates
The ListView enables you to define its content by utilizing the provided list item, header, footer, loader, and no-data 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.
No-Data Template
When the ListView has no items to display—because the data input is an empty array or resolves to zero items after filtering—the content area remains empty unless you provide a no-data template.
To define what the ListView renders when there is no data, nest an <ng-template> tag with the kendoListViewNoDataTemplate directive inside the <kendo-listview> tag.
<kendo-listview [data]="[]">
<ng-template kendoListViewNoDataTemplate>
No items to display.
</ng-template>
</kendo-listview>The following example demonstrates a custom no-data template with contextual messaging and inline action buttons. Use the category filters and the search box to narrow down the product list. When no items match, the template displays a relevant message and offers quick actions to clear the active filters.