# Templates

The MultiSelect provides templates which enable you to customize the content of its drop-down list items and elements.

## Item Template

To customize the content of the list items, use the item template.

The MultiSelect supports the following scenarios for using its item template:

* [Defining the item template](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates#defining-the-item-template)
* [Configuring the content of a custom item](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates#rendering-custom-item-content)

### Defining the Item Template

To define an item template, nest an `<ng-template>` tag with the [`kendoMultiSelectItemTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/itemtemplatedirective) directive inside a [`<kendo-multiselect>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselectcomponent) tag.

Use the `let-dataItem` directive to access the template context that is established based on the current data item displayed in the component list.

The following snippet shows the structure of an item template that renders a badge alongside the item text.

```html
<kendo-multiselect [data]="listItems" textField="text" valueField="value" [(ngModel)]="value">
    
    <ng-template kendoMultiSelectItemTemplate let-dataItem>
        <span class="size-badge">{{ dataItem.abbr }}</span> {{ dataItem.text }}
    </ng-template>
</kendo-multiselect>
```

The following example demonstrates how to use an item template to customize the dropdown list items.

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

### Rendering Custom Item Content

To configure the content of the custom value item in the list, use the custom item template. To define a custom item template, nest an `<ng-template>` tag with an [`kendoMultiSelectCustomItemTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/customitemtemplatedirective) directive inside a [`<kendo-multiselect>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselectcomponent) tag.

The template context is set to the current text of the MultiSelect.

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

## Tag Template

To customize the content of the element that holds the selected text, use the tag template. To define a tag template, nest an `<ng-template>` tag with a [`kendoMultiSelectTagTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/tagtemplatedirective) directive inside a [`<kendo-multiselect>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselectcomponent) tag.

> * To render the selected items as a single summary tag, enable the [single-tag mode](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/summary-tag-mode) through the [`GroupTagTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/grouptagtemplatedirective).
> * While the `TagTemplate` enables you customize a single tag, the `GroupTagTemplate` enables you to customize the selected items in the single-tag mode.

The template context is set to the current MultiSelect component.

The following snippet shows a tag template that prepends a numeric badge to each selected item's text. The `let-dataItem` binding exposes the full data object.

```html app.component.html
<kendo-multiselect [data]="listItems" textField="text" valueField="value" [(ngModel)]="value">
    
    <ng-template kendoMultiSelectTagTemplate let-dataItem>
        <span class="tag-badge">{{ dataItem.value }}</span> {{ dataItem.text }}
    </ng-template>
</kendo-multiselect>
```

The following example demonstrates how to customize the selected item tags with a tag template.

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

## Header Template

To customize the header element of the drop-down list, use the header template. To define a header template, nest an `<ng-template>` tag with a [`kendoMultiSelectHeaderTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/headertemplatedirective) directive inside a [`<kendo-multiselect>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselectcomponent) tag.

The template context is set to the current MultiSelect component.

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

## Footer Template

To customize the footer element of the drop-down list, use the footer template. To define a footer template, nest an `<ng-template>` tag with a [`kendoMultiSelectFooterTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/footertemplatedirective) directive inside a [`<kendo-multiselect>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselectcomponent) tag.

The template context is set to the current MultiSelect component.

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

## No-Data Template

To customize the content of the drop-down list when no data is available, use the no-data template. To define a no-data template, nest an `<ng-template>` tag with a [`kendoMultiSelectNoDataTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/nodatatemplatedirective) directive inside a [`<kendo-multiselect>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselectcomponent) tag.

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

## Group Header Template

To customize the content of the group headers in the list, nest an `<ng-template>` tag with a [`kendoMultiSelectGroupTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/grouptemplatedirective) directive inside a [`<kendo-multiselect>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselectcomponent) tag.

The current group name is available as implicit context variable (`let-groupName`).

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

## Fixed Group Header Template

To customize the content of the group header that is fixed above the list, nest an `<ng-template>` tag with a [`kendoMultiSelectFixedGroupTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/fixedgrouptemplatedirective) directive inside a [`<kendo-multiselect>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselectcomponent) tag.

The current group name is available as an implicit context variable (`let-groupName`).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multiselect/templates/fixed-group-header/source.txt)

## Suggested Links

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