Templates
The ListBox provides templating capabilities that allow you to customize the appearance of its items beyond the default text display. You can create rich list items that include images, icons, badges, and complex layouts while maintaining full component functionality.
Item Template
To customize the appearance of the items, nest an <ng-template> tag with the kendoListBoxItemTemplate directive inside the <kendo-listbox> tag.
<kendo-listbox [data]="items">
<ng-template kendoListBoxItemTemplate let-dataItem>
<!-- Custom item content goes here -->
</ng-template>
</kendo-listbox>The template context is set to the current data item, allowing you to access all its properties.
The following example demonstrates an item template that displays team member information with avatars, status indicators, role icons, and department badges.
No-Data Template
When the ListBox has no items to display—because the data input is an empty array or resolves to zero items after filtering—it renders a built-in no-data message. To override the default text, use the noDataText property of the kendo-listbox-messages component.
To replace the default message with entirely custom content, nest an <ng-template> tag with the kendoListBoxNoDataTemplate directive inside the <kendo-listbox> tag.
<kendo-listbox [data]="[]">
<ng-template kendoListBoxNoDataTemplate>
No items to display.
</ng-template>
</kendo-listbox>The following example demonstrates a custom no-data template in a team assignment scenario. Use the toolbar between the two panels to move members across. Move all members to one side to trigger the custom no-data template on the other.