place icon inside of outlined textbox

[imre horvath]

Hi,

I'm trying to place an icon inside of an outlined (material theme) textbox. I read the docu and tried many combinations of the css classes, but I didn't manage to get it work. This is the markup:

<div class="e-input-group e-float-icon-left">

    <div class="e-input-in-wrap">

      <span class="e-input-group-icon e-icons e-user"></span>

      <ejs-textbox

        cssClass="e-outline"

        placeholder="First Name"

        floatLabelType="Auto"

      ></ejs-textbox>

    </div>

  </div>

And this is how it looks like:

I have two another questions:

1. In your docu you use simple input classes. But in other places you use f. e. ejs-textbox. Why this?
2. I'm unable to show the user icon (e7b4) nor the key icon (e77f). My css should be OK, f. e.:

.e-user::before {

content: "\e993";

}

But if I change the content, no icon is showing.

[Sureshkumar P]

Hi Imre,

We can add the icons to the textbox component by using the addIcon method. To know more about the addIcon method please refer to the documentation section.

API Documentation: https://ej2.syncfusion.com/angular/documentation/api/textbox#addicon

find the sample here: https://stackblitz.com/edit/angular-tu1zjk?file=app.component.html

Regards,

Sureshkumar P

[Amalia Chrysanthakopoulou]

And what if we want to remove the added icon?

[UdhayaKumar Duraisamy]

To remove the appended icon in the TextBox component, you can use removeChild. Additionally, you need to remove the ‘e-float-icon-left’ class from the TextBox wrapper element to properly align the input values after removing the icon. Please refer to the code snippet and sample below for more details.

[app.component.html]

  <div class="content-wrapper">

    <div>

      <div class="control-label">Numeric TextBox</div>

      <!-- Render Numeric Textbox -->

      <ejs-textbox #textbox value="10" cssClass="e-outline"></ejs-textbox>

    </div>

    <button class="e-btn" (click)="onAddIcon()">Add Icon</button>

    <button class="e-btn" (click)="onRemoveIcon()">Remove Icon</button>

  </div>

[app.component.ts]

export class AppComponent {

  @ViewChild('textbox')

  public textareaObj: TextBoxComponent;

 

  onAddIcon() {

    (this.textareaObj as any).addIcon('preppend', 'e-icons e-input-eye');

    document

      .getElementsByClassName('e-input-eye')[0]

      .addEventListener('click', function (e) {

        alert('clicked');

      });

  }

 

  onRemoveIcon() {

    var text_el = (this.textareaObj as any).textboxWrapper.container;

    var icon = (this.textareaObj as any).textboxWrapper.container.querySelector(

      '.e-icons.e-input-eye'

    );

    text_el.removeChild(icon);

    text_el.classList.remove('e-float-icon-left');

  }

}

Sample: Wc9669 (forked) - StackBlitz