# Templates

The ComboBox provides templates which enable you to customize the content of its suggestion list items and elements.

## Item Template

To customize the content of the list items, use the item template. To define an item template, nest an `<ng-template>` tag with the [`kendoComboBoxItemTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/itemtemplatedirective) directive inside a [`<kendo-combobox>`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent) 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.

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

## Header Template

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

The template context is set to the current ComboBox component.

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

## Footer Template

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

The template context is set to the current ComboBox component.

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

## No-Data Template

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/combobox/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 [`kendoComboBoxGroupTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/grouptemplatedirective) directive inside a [`<kendo-combobox>`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/autocompletecomponent) tag.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/combobox/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 [`kendoComboBoxFixedGroupTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/fixedgrouptemplatedirective) directive inside a [`<kendo-combobox>`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent) 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/combobox/templates/fixed-group-header/source.txt)

## Suggested Links

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