Hiding the dropdown arrow on the Angular ComboBox

[Jimmy]

I need to hide the DropDown arrow on an Angular ComboBox so that it will function as an Autocomplete.  I can not use the AutoComplete control as I need to send in an id which is a number and the AutoComplete only supports strings.  If I can solve either of these issues I would be a happy camper :)

[Dimiter Topalov]

Hi Jimmy,

Indeed, the AutoComplete supports string values only. The most straight-forward approach to hide the dropdown arrow of the ComboBox is via CSS:

encapsulation: ViewEncapsulation.None,
  styles: [`
    .k-combobox .k-dropdown-wrap .k-select {
      display: none;
    }

    .k-combobox .k-dropdown-wrap .k-clear-value {
      right: 8px;
    }
  `]

https://stackblitz.com/edit/angular-y1piaa?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Jimmy]

Thank you so much Dimiter.  That worked perfectly.

[Zhenyong]

Hi Dimiter,

I got into the same problem and tried out your solution. I found out that ViewEncapsulation.None will affect other combo box in the app. How can I set the style on one isolated component only?

 

[Dimiter Topalov]

Hello Zhenyong,

To scope the custom styling to one or several selected components only, add a custom class to each of them, and scope the custom styling CSS selector to this class, for example:

https://stackblitz.com/edit/angular-y1piaa-lm9jyd?file=app/app.component.ts

Regards,
Dimiter Topalov
Progress Telerik

[Zhenyong]

Thanks for your suggestion. It solved my problem!