# Templates

The AutoComplete provides templates which enable you to customize the content of its suggestion 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 [`kendoAutoCompleteItemTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/itemtemplatedirective) directive inside a [`<kendo-autocomplete>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/autocompletecomponent) 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/autocomplete/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 [`kendoAutoCompleteHeaderTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/headertemplatedirective) directive inside a [`<kendo-autocomplete>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/autocompletecomponent) tag.

The template context is set to the current AutoComplete component.

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

## Footer Template

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

The template context is set to the current AutoComplete component.

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

## No-Data Template

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

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

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

Hint: scroll to the second group header to see its template changing.

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

## Suggested Links

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