src/app/auth/_directives/password-toggle.directive.ts
Toggle password form field input visibility
Selector | [appPasswordToggle] |
Methods |
Inputs |
constructor(elementRef: ElementRef, renderer: Renderer2)
|
||||||||||||
Handle click events on the html element.
Parameters :
|
iconId | |
Type : string
|
|
The password form field icon id |
id | |
Type : string
|
|
The password form field id |
togglePasswordVisibility |
togglePasswordVisibility()
|
Toggle the visibility of the password input field value and accompanying icon.
Returns :
void
|
import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
/** Toggle password form field input visibility */
@Directive({
selector: '[appPasswordToggle]',
})
export class PasswordToggleDirective {
/** The password form field id */
@Input()
id: string;
/** The password form field icon id */
@Input()
iconId: string;
/**
* Handle click events on the html element.
*
* @param elementRef - A wrapper around a native element inside of a View.
* @param renderer - Extend this base class to implement custom rendering.
*/
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
this.togglePasswordVisibility();
});
}
/** Toggle the visibility of the password input field value and accompanying icon. */
togglePasswordVisibility(): void {
const password: HTMLElement = document.getElementById(this.id);
const icon: HTMLElement = document.getElementById(this.iconId);
// @ts-ignore
if (password.type === 'password') {
// @ts-ignore
password.type = 'text';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
} else {
// @ts-ignore
password.type = 'password';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
}
}
}