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 passwords as mentioned below.
[app.component.html]
|
<ejs-textbox id="password" width="190px" #default type="password" placeholder="Enter your Password"
floatLabelType="Auto" required></ejs-textbox>
|
[app.component.ts]
|
@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";
}
});
}
|
Find the sample here: https://stackblitz.com/edit/angular-ipnbng-mrwprq?file=app.component.ts
