# 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`](https://www.telerik.com/kendo-angular-ui/components/listbox/api/itemtemplatedirective) directive inside the `<kendo-listbox>` tag.

```html
<kendo-listbox [data]="items">
    <ng-template kendoListBoxItemTemplate let-dataItem>
        
    </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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/listbox/templates/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui/components/listbox/api/custommessagescomponent#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`](https://www.telerik.com/kendo-angular-ui/components/listbox/api/nodatatemplatedirective) directive inside the `<kendo-listbox>` tag.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/listbox/templates/no-data/source.txt)

## Suggested Links

* [API Reference of the ListBox](https://www.telerik.com/kendo-angular-ui/components/listbox/api)