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.

html

<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.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the ListBox