1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
@Directive({
selector: '[cdPasswordButton]'
})
export class PasswordButtonDirective implements OnInit {
private iElement: HTMLElement;
@Input()
private cdPasswordButton: string;
constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
ngOnInit() {
this.renderer.setAttribute(this.elementRef.nativeElement, 'tabindex', '-1');
this.iElement = this.renderer.createElement('i');
this.renderer.addClass(this.iElement, 'fa');
this.renderer.appendChild(this.elementRef.nativeElement, this.iElement);
this.update();
}
private getInputElement() {
return document.getElementById(this.cdPasswordButton) as HTMLInputElement;
}
private update() {
const inputElement = this.getInputElement();
if (inputElement && inputElement.type === 'text') {
this.renderer.removeClass(this.iElement, 'fa-eye');
this.renderer.addClass(this.iElement, 'fa-eye-slash');
} else {
this.renderer.removeClass(this.iElement, 'fa-eye-slash');
this.renderer.addClass(this.iElement, 'fa-eye');
}
}
@HostListener('click')
onClick() {
const inputElement = this.getInputElement();
// Modify the type of the input field.
inputElement.type = inputElement.type === 'password' ? 'text' : 'password';
// Update the button icon/tooltip.
this.update();
}
}
|
