Angular password component

readme.md

Angular component using bootstrap/fontawesome to show password:

Based on https://dev.to/benneee_/creating-a-show-or-hide-password-feature-for-angular-forms-4fdk

password-input.component.html

<div class="input-group">
  <input [type]="fieldTextType ? 'text' : 'password'" class="form-control"
    placeholder="Password"
    [id]="formControlName"
    [formControl]="control" />
  <div class="input-group-append">
    <span class="input-group-text">
      <i
        class="fa"
        [ngClass]="{
          'fa-eye-slash': !fieldTextType,
          'fa-eye': fieldTextType
        }"
        (click)="toggleFieldTextType()"
      ></i>
    </span>
  </div>
</div>
  

password-input.component.ts

import { Component, forwardRef, Injector, Input, ViewChild } from '@angular/core';
import { ControlContainer, ControlValueAccessor, FormControl, FormControlDirective,
  NG_VALUE_ACCESSOR
} from '@angular/forms';

@Component({
  selector: 'app-password-input',
  templateUrl: './password-input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => PasswordInputControl),
      multi: true
    }
  ]
})
export class PasswordInputControl implements ControlValueAccessor {
  @ViewChild(FormControlDirective, { static: true }) formControlDirective: FormControlDirective;
  @Input() formControlName = 'password';
  @Input() placeholder = 'Password';
  @Input() _value = '';
  @Input() formControl: FormControl;

  fieldTextType: boolean;
  onChange: any = () => { };
  onTouched: any = () => { };

  constructor(
    private injector: Injector
  ) { }

  toggleFieldTextType() {
    this.fieldTextType = !this.fieldTextType;
  }

  get control() {
    return this.formControl || this.controlContainer?.control?.get(this.formControlName);
  }

  get controlContainer() {
    return this.injector?.get(ControlContainer);
  }

  get value() {
    return this._value;
  }

  set value(val) {
    this._value = val;
    this.onChange(val);
    this.onTouched();
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  writeValue(value) {
    if (value) {
      this.value = value;
    }
  }

  setDisabledState(isDisabled: boolean): void {
    this.formControlDirective?.valueAccessor?.setDisabledState(isDisabled);
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }
}