Password component

password.component.ts

import {Component, ElementRef, Input, ViewChild, ViewEncapsulation} from '@angular/core';
import {FormGroup} from '@angular/forms';

@Component({
  selector: 'wi-password',
  templateUrl: './password.component.html',
  styleUrls: ['./password.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class PasswordComponent {
  @Input() form: FormGroup;
  @Input() itemName: string;
  @Input() styles: string | Array<string>;
  @Input() id = 'password';
  @Input() placeholder = 'Senha';
  public inputType = 'password';
  @ViewChild('eyeElement') eyeElement: ElementRef;
  public showPassword = false;
  
  constructor() {
  }
  
  toggleEye() {
    if (this.inputType === 'password') {
      this.showPassword = true;
      this.inputType = 'text';
    } else {
      this.showPassword = false;
      this.inputType = 'password';
    }
  };
}

Template

<div class="form-group password" *ngIf="form" [formGroup]="form">
    <input
            [id]="id"
            [ngClass]="styles"
            name="password"
            class="form-control"
            [attr.type]="inputType"
            [placeholder]="placeholder"
            autocomplete="false"
            [formControlName]="itemName">
    <a *ngIf="form.get(itemName).value" #eyeElement (click)="toggleEye()" class="toggle icon"
       [ngClass]="{'icon-eye-open': form.get(itemName).value && !showPassword,
   'icon-eye-close':form.get(itemName).value && showPassword}"></a>
</div>