Adding Suffix Adornment Icon to AutoComplete

Environment

Description

How can I add a suffix adornment icon to the Kendo UI for Angular AutoComplete?

Solution

Unlike the TextBox, the AutoComplete and the rest of the Kendo dropdown components do not provide a built-in adornment option. To add a suffix adornment icon:

1. Create a custom icon outside the AutoComplete and wrap them into a single container:

   Copy Code<span class="autocomplete-container">
       <kendo-autocomplete ...></kendo-autocomplete>
       <span class="toggle-icon k-icon k-i-cancel"></span>
   </span>

2. Position the created icon through custom CSS code. Note that the proposed units and values could vary depending on how and where the AutoComplete is defined.

   Copy Codespan {
        margin-right: 15px;
    }
    kendo-autocomplete {
        width: 170px;
    }
   .autocomplete-container {
     position: relative;
   }
   .toggle-icon {
     position: absolute;
     top: 0px;
     right: -10px;
     font-size: 18px;
     color: red;
   }

3. Depending on the project requirements, the icon could be visible in specific cases (like when the control is invalid). Use the *ngIf structural directive to determine the visibility of the icon.

   Copy Code<span
       *ngIf="myForm.controls.size.touched && myForm.controls.size.invalid"
       class="toggle-icon k-icon k-i-cancel"
   ></span>

The following example demonstrates how to add a suffix adornment icon when the AutoComplete control gets invalid.

Suggested Links

• API Reference of the Window
• API Reference of the WindowService