36 lines
944 B
TypeScript
36 lines
944 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: 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');
|
|
}
|
|
}
|
|
}
|