Is there a way (or could it be a new feature) to add buttons via the textbox options object?

[André Freitas Franchi]

In typescrypt ej2 I wish I was able to just add more buttons to the textbox object, to create some buttons just like the clearbutton, but without having to add extra html and letting the creation to the object. Is there a way? Inspecting I found that there is a buttons array in a property named textboxWrapper in the component. Could It be used to add extra buttons (like show and hide password), just like I can do in devexpress textBox? If not, could it be in a future feature? 

[Berly Christopher]

Hi André, 

  

Greetings from Syncfusion support. 

  

We have already provided the support for adding the icon to the EJ2 TextBox component by using addIcon public method and we can achieve the functionality for show/hide password as mentioned below.  

  

[app.component.html] 

  

  <ejs-textbox id="password" width="190px" #default type="password" placeholder="Enter your Password" floatLabelType="Auto"  required></ejs-textbox> 

<style> 

      .e-input-eye:before { 

        content:'\e345'; 

        font-family: e-icons; 

        font-size: 13px; 

    } 

  </style> 

  

[app.component.ts] 

  

export class AppComponent { 

    @ViewChild('default', {static: true}) 

    public textbox: TextBoxComponent; 

    ngAfterViewInit() { 

      this.textbox.addIcon("append", "e-icons e-input-eye"); 

      document.getElementsByClassName("e-input-eye")[0].addEventListener("click", function (e) { 

        let textObj: any = (document.getElementById("password") as any).ej2_instances[0]; 

        if (textObj.element.type === "password") { 

          textObj.element.type = "text"; 

        } else { 

          textObj.element.type = "password"; 

        } 

      }); 

    } 

} 

 

  

Please find the sample from the below link. 

Sample Link: https://stackblitz.com/edit/angular-ipnbng-nskpcw?file=app.component.ts  

  

To know more about TextBox component, please refer the below documentation link. 

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

  

Regards, 

Berly B.C 

[André Freitas Franchi]

Hello Berly.

Greetings from VBS. 

I mentioned typescript Ej2 component, not the Angular implementation. 

I wish I could implement buttons using this code from this link: https://ej2.syncfusion.com/documentation/textbox/getting-started/?no-cache=1#floating-label 

import { TextBox } from '@syncfusion/ej2-inputs'

let inputobj: TextBox = new TextBox({
    placeholder: 'First Name',
    floatLabelType: 'Auto',
     buttons: [
          {
              cssClass: 'x',
               ...
          },
          {
               ...
          }
     ]
});

inputobj.appendTo('#firstName');

[Berly Christopher]

Hi André, 

  

Thanks for the update. 

  

Currently, we have not provided requested requirement at our end. As we stated earlier, we have provided addIcon public method to add the icon in the required position instead of requested scenario. We have prepared the sample for show/hide password in the TypeScript platform and attached it below. 

  

Sample Link: https://stackblitz.com/edit/ldro6w-fmeyxr?file=index.ts 

  

Also, we have already logged to add the custom elements in the TextBox in the required position and this support will be included in any one of our upcoming releases.  

  

You can track the status of the feature from the below feedback link. 

Feedback: https://www.syncfusion.com/feedback/12208/  

  

Regards, 

Berly B.C