Hide show eye icon inside password field angular 6

Question

The function is working fine but i'm doing it with a checkbox till now I just need help with the eye icon inside the password input field without bootstrap or font-awesome if possible and thanks

      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

I would do as the official were documented:

Instead of setting type in the component use dynamic value for the type attribute.

HTML:

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

TS Code:

hide : boolean = true;

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

Working_Demo_with_eye_icon