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