All Components

Templates

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

Item Template

To customize the content of each suggested list item, use the item template. To define an item template, nest a <ng-template> tag with an kendoAutoCompleteItemTemplate directive inside a <kendo-autocomplete> tag.

The template context is set to the current AutoComplete component. To get a reference to the current data item, use the let-dataItem directive.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <kendo-autocomplete [data]="listItems">
            <ng-template kendoAutoCompleteItemTemplate let-dataItem>
                <span style="color: #00F;">{{ dataItem }}</span>
            </ng-template>
        </kendo-autocomplete>
    </div>
   `
})
class AppComponent {
     public listItems: Array<string> = ["Item 1", "Item 2", "Item 3"];
}

Header Template

To customize the header element of the suggested list, use the header template. To define a header template, nest a <ng-template> tag with a kendoAutoCompleteHeaderTemplate directive inside a <kendo-autocomplete> tag.

The template context is set to the current AutoComplete component.

@Component({
  selector: 'my-app',
  styles: ['h4 { font-size: 1em; font-weight: bold; padding: 0 8px; }'],
  template: `
    <kendo-autocomplete [data]="listItems" [placeholder]="'e.g. Andorra'">
        <ng-template kendoAutoCompleteHeaderTemplate>
            <h4>Countries</h4>
        </ng-template>
    </kendo-autocomplete>
   `
})
class AppComponent {
    public listItems: Array<string> = [
     "Albania",
     "Andorra",
     "Armenia",:
     "Austria",
     "Azerbaijan",
     "Belarus",
     "Belgium",
     "Bosnia & Herzegovina",
     "Bulgaria",
     "Croatia",
     "Cyprus",
     "Czech Republic",
     "Denmark",
     "Estonia",
     "Finland",
     "France",
     "Georgia",
     "Germany",
     "Greece"
     ];
}

To customize the footer element of the suggested list, use the footer template. To define a footer template, nest a <ng-template> tag with a kendoAutoCompleteFooterTemplate directive inside a <kendo-autocomplete> tag.

The template context is set to the current AutoComplete component.

@Component({
  selector: 'my-app',
  styles: ['h4 { font-size: 1em; font-weight: bold; padding: 0 8px; }'],
  template: `
    <kendo-autocomplete [data]="listItems" [placeholder]="'e.g. Andorra'">
        <ng-template kendoAutoCompleteFooterTemplate>
            <h4>total: {{listItems.length}} countries</h4>
        </ng-template>
    </kendo-autocomplete>
   `
})
class AppComponent {
    public listItems: Array<string> = [
     "Albania",
     "Andorra",
     "Armenia",:
     "Austria",
     "Azerbaijan",
     "Belarus",
     "Belgium",
     "Bosnia & Herzegovina",
     "Bulgaria",
     "Croatia",
     "Cyprus",
     "Czech Republic",
     "Denmark",
     "Estonia",
     "Finland",
     "France",
     "Georgia",
     "Germany",
     "Greece"
     ];
}

No-Data Template

To customize the content of the suggested list when no data is present, use the no-data template. To define a no-data template, nest a <ng-template> tag with a kendoAutoCompleteNoDataTemplate directive inside a <kendo-autocomplete> tag.

@Component({
  selector: 'my-app',
  styles: ['.k-i-warning { font-size: 2.5em; } h4 { font-size: 1em;}'],
  template: `
    <kendo-autocomplete [data]="listItems">
        <ng-template kendoAutoCompleteNoDataTemplate>
            <h4><span class="k-icon k-i-warning"></span><br /><br /> No data here</h4>
        </ng-template>
    </kendo-autocomplete>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [];
}
In this article