All Components

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

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

@Component({
  selector: 'my-app',
  styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],
  template: `
    <div class="example-wrapper">
        <kendo-combobox
            [data]="listItems"
            [textField]="'text'"
            [valueField]="'value'"
            [value]="selectedValue"
            [valuePrimitive]="true"
        >
            <ng-template kendoComboBoxItemTemplate let-dataItem>
                <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
            </ng-template>
        </kendo-combobox>
    </div>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public selectedValue: number = 2;
}

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

The template context is set to the current ComboBox component.

@Component({
  selector: 'my-app',
  styles: ['h4 { font-size: 1em; font-weight: bold; padding: 0 8px; }'],
  template: `
    <kendo-combobox
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
        [value]="selectedValue"
        [valuePrimitive]="true"
    >
        <ng-template kendoComboBoxHeaderTemplate>
            <h4>T-shirt sizes</h4>
        </ng-template>
    </kendo-combobox>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public selectedValue: number = 2;
}

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

The template context is set to the current ComboBox component.

@Component({
  selector: 'my-app',
  styles: ['h4 { font-size: 1em; font-weight: bold; padding: 0 8px; }'],
  template: `
    <kendo-combobox
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
        [value]="selectedValue"
        [valuePrimitive]="true"
    >
        <ng-template kendoComboBoxFooterTemplate>
            <h4>{{listItems.length}} sizes available</h4>
        </ng-template>
    </kendo-combobox>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public selectedValue: number = 2;
}

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

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