angular - 隐藏密码字段内的显示眼睛图标 angular 6

Question

该功能运行良好，但到目前为止我都是使用复选框来完成的我只需要有关密码输入字段内的眼睛图标的帮助如果可能，没有 Bootstrap 或 Font Awesome 并感谢

      myFunction() {
  let x : any = document.getElementById("inputPassword");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

<input [(ngModel)]="password" type="password" id="inputPassword"  name="password"
                     placeholder="{{'Password' | translate}}"  required>
                     <input type = "checkbox" (click)="myFunction()">

Answer 1

我会按照官方记录的那样去做:

不要在组件中设置类型，而是为类型属性使用动态值。

HTML:

<input placeholder="Enter your password" [type]="hide ? 'password' : 'text'">

TS代码:

hide : boolean = true;

myFunction() {
  this.hide = !this.hide;
}

Working_Demo_with_eye_icon