# All files / src/app/shared/directives password-button.directive.ts

81.48% Statements 22/27
63.64% Branches 7/11
80% Functions 4/5
79.17% Lines 19/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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
    46
    4792x

    92x

    92x

    36x

    92x
    35x
    35x
    35x
    35x
    35x
    35x

    92x
    35x

    92x
    35x

    35x
    35x

    184x

    92x
     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, 'icon-prepend');
        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();
      }
    }