39 lines
928 B
TypeScript
39 lines
928 B
TypeScript
import {Directive, ElementRef, Input, Renderer2} from '@angular/core';
|
|
|
|
@Directive({
|
|
selector: '[appPasswordToggle]'
|
|
})
|
|
export class PasswordToggleDirective {
|
|
@Input()
|
|
id: string;
|
|
|
|
@Input()
|
|
iconId: string;
|
|
|
|
constructor(
|
|
private elementRef: ElementRef,
|
|
private renderer: Renderer2,
|
|
) {
|
|
this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
|
|
this.togglePasswordVisibility();
|
|
});
|
|
}
|
|
|
|
togglePasswordVisibility(): void {
|
|
const password = document.getElementById(this.id);
|
|
const icon = 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');
|
|
}
|
|
}
|
|
}
|