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

Templates

The DropDownList 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 suggestion list items, use the item template. To define an item template, nest an <ng-template> tag with the kendoDropDownListItemTemplate directive inside a <kendo-dropdownlist> 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.

Example
View Source
Change Theme:

Value Template

To customize the content of the element which holds the selected text, use the value template. To define a value template, nest an <ng-template> tag with a kendoDropDownListValueTemplate directive inside a <kendo-dropdownlist> tag.

The template context is set to the current DropDownList component. To get a reference to the current data item, use the let-dataItem directive.

Example
View Source
Change Theme:

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 kendoDropDownListHeaderTemplate directive inside a <kendo-dropdownlist> tag.

The template context is set to the current DropDownList component.

Example
View Source
Change Theme:

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 kendoDropDownListFooterTemplate directive inside a <kendo-dropdownlist> tag.

The template context is set to the current DropDownList component.

Example
View Source
Change Theme:

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 kendoDropDownListNoDataTemplate directive inside a <kendo-dropdownlist> tag.

Example
View Source
Change Theme:

Group Header Template

To customize the content of the group headers in the list, nest an <ng-template> tag with a kendoDropDownListGroupTemplate directive inside a <kendo-dropdownlist> tag.

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

Example
View Source
Change Theme:

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 kendoDropDownListFixedGroupTemplate directive inside a <kendo-dropdownlist> tag.

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

Example
View Source
Change Theme: