New to Kendo UI for Angular? Start a free 30-day trial

Rendering Custom Content inside the AutoComplete and ComboBox Input Fields


ProductProgress® Kendo UI® for Angular AutoCompleteProgress® Kendo UI® for Angular ComboBox


How can I render custom content in the value field of the Kendo UI for Angular Autocomplete and ComboBox components?


Due to the specifics of the Autocomplete and ComboBox components, they do not support a value template for their input field. The reason is that the value, which is passed to this field, is strictly related to the search and sort functionalities of the components and the field, therefore, cannot contain a value that is not present in the list of items.

Alternatively, you can use the DropDownList component with its value template, which allows you to render a certain value in the input field while the initial data is displayed as a list of items.

Yet another possible approach is to use the MultiSelect or MultiSelect Tree components, limiting them to select a single value and customizing the rendering of the selected option by using their tag template and applying custom CSS.

To achieve the desired scenario:

  1. Handle the valueChange event of the Multiselect component and apply custom logic to limit the selection to a single value:

    <kendo-multiselect (valueChange)="onValueChange($event)"></kendo-multiselect>
    public onValueChange(e: ListItems[]): void {
        if (e.length === 0) {
        this.value = [e[e.length - 1]];
  2. Apply the tag template by nesting an ng-template tag with a kendoMultiSelectTagTemplate directive inside a kendo-multiselect tag:

        <ng-template kendoMultiSelectTagTemplate>
  3. Inside the ng-template tag, nest an HTML element that will hold the displayed data in the input field:

    <ng-template kendoMultiSelectTagTemplate let-dataItem>
        <kendo-svgicon *ngIf="value[0]" [icon]="dataItem.icon"> </kendo-svgicon>
        {{ dataItem }}
  4. Apply the custom CSS styles to hide the borders and the Remove buttons of the tabs:

    .k-multiselect .k-chip-list .k-chip-actions {
        display: none;
    .k-multiselect .k-chip-list .k-chip {
        background: none;
        border: none;

The following example demonstrates how to implement this scenario by using the Kendo UI for Angular Icons:

View Source
Change Theme:

In this article

Not finding the help you need?