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.
The template context is set to the current DropDownList component. To get a reference to the current data item, use the let-dataItem directive.
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).
