New to Kendo UI for Angular? Start a free 30-day trial

Templates

The ListView content can be defined 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 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 adding a filter input in the header of the ListView.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 adding a metadata section and a reload data button in the footer of the ListView.

Example
View Source
Edit In Stackblitz  
Change Theme:

Loader Template

When the loading property of the ListView is set to true, the built-in loader indicator will be displayed (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 show-cases how to integrate the Loader component in the ListView.

Example
View Source
Edit In Stackblitz  
Change Theme: