I have successfully implemented an Angular Directive to toggle the visibility of password fields in a form. However, I am facing an issue with updating the text displayed on the button based on the state of the input field.
Is there a way for me to dynamically change the button text to 'HIDE' when the user clicks to reveal the password, and then revert it back to 'SHOW' when the user clicks again to hide the password?
Here is the code snippet that forms the basis of this functionality:
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
selector: '[passToggle]'
})
export class ToggleDirective {
visible: boolean = false;
constructor(private el: ElementRef, private renderer: Renderer2) { }
div = this.renderer.createElement('div');
span = this.renderer.createElement('span');
ngOnInit() {
this.buildInputAppend();
}
buildInputAppend () {
this.renderer.addClass(this.div, 'input-group-append');
this.renderer.addClass(this.span, 'input-group-text');
const text = this.renderer.createText('Show');
this.renderer.appendChild(this.span, text);
this.renderer.appendChild(this.div, this.span);
this.renderer.appendChild(this.el.nativeElement, this.div);
}
@HostListener('click') onClick() {
this.visible = !this.visible;
const parent = this.el.nativeElement.parentNode;
const input = this.el.nativeElement.firstChild;
if (!this.visible) {
input.setAttribute('type', 'text');
} else {
input.setAttribute('type', 'password');
}
}
}
The HTML template structure is as follows:
<div class="form-group">
<div class="input-group" passToggle>
<input class="form-control" type="password"formControlName="password" >
</div>
</div>
If you want to see a demonstration of this feature in action, check out this link: Password Toggle Demo