How to Add Custom Icons to Floating Labels in Angular ComboBox?

In certain scenarios, enhancing the visual appeal and functionality of form elements is necessary. One such enhancement is adding custom icons to the floating labels in Angular ComboBox components. This article will guide you through the process of adding an icon next to the floating label using the created event in a ComboBox component.

Set Up the ComboBox Component

Define the ComboBox component in your template with the floatLabelType property set to Always. Here’s an example of how to set up the ComboBox:

<ejs-combobox
   id="games"
   #sample
   floatLabelType="Always"
   [dataSource]="sportsData"
   [fields]="fields"
   [(value)]="value"
   [placeholder]="waterMark"
   (created)="onCreated()"
 ></ejs-combobox> 

Define the Data Source and Fields

In your component class, specify the data source and the fields that the ComboBox will use:

export class AppComponent {
 @ViewChild('sample')
 public comboBoxObj: ComboBoxComponent;
 public sportsData: Object[] = [
   { Id: 'Game1', Game: 'American Football' },
   { Id: 'Game2', Game: 'Badminton' },
   { Id: 'Game3', Game: 'Basketball' },
 ];
 public fields: Object = { text: 'Game', value: 'Id' };
 public value: string = 'Game3';
 public waterMark: string = 'Select a game';
} 

Create the Custom Icon Element and add to Label

Implement the onCreated method to create a custom icon and append it to the label element:

public onCreated() {
   var infoIcon = document.createElement('span');
   infoIcon.className = 'e-icons e-circle-info';
   infoIcon.style.margin = '1%';
   var labelElement = this.comboBoxObj.element.querySelector(
     '.e-float-text.e-label-top'
   );
   if (labelElement) {
     labelElement.appendChild(infoIcon);
   }
 } 

• The created event of the ComboBox component is used to execute the code that adds the icon.
• The icon is created as a span element with the desired classes and styles.
• The icon is then appended to the label element within the ComboBox.

By following these steps, you can successfully add custom icons to the floating labels in your ComboBox components, enhancing the user interface of your application.

You can find a sample implementation here.

Conclusion
I hope you enjoyed learning on how to add custom icons to floating labels in Angular ComboBox.
You can refer to our Angular ComboBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular ComboBox example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!