New to Kendo UI for AngularStart a free 30-day trial

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 directive inside a <kendo-autocomplete> 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.

Change Theme
Theme
Loading ...

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

The template context is set to the current AutoComplete component.

Change Theme
Theme
Loading ...

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

The template context is set to the current AutoComplete component.

Change Theme
Theme
Loading ...

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

Change Theme
Theme
Loading ...

Group Header Template

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

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

Change Theme
Theme
Loading ...

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 directive inside a <kendo-autocomplete> 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.

Change Theme
Theme
Loading ...