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

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.

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 how to add 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 how to add 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 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.

Example
View Source
Edit In Stackblitz  
Change Theme: