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.
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.
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.
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 kendoDropDownListFooterTemplate directive inside a <kendo-dropdownlist> tag.
The template context is set to the current DropDownList component.
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.
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).
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).