I give eye open for show password. I want to strikeout when user click,. Here my code,

component.html

<i  
      style="font-size: 22px; margin-left: -80px; cursor: pointer;" 
      id="togglePassword" (click) = "onclicktoggle()" ></i>

component.ts

onclicktoggle(){
    var x = <HTMLInputElement>document.getElementById("password");
    if (x.type === "password") {
      x.type = "text";
    } else {
      x.type = "password";
    }

Thanks in advance,... }

CodePudding user response：

Don't know how fa works but try this way :

showPassword = false;

<i 
  [class.show]="showPassword"
  (click)="showPassword = !showPassword">
</i>

CodePudding user response：

Replace the icon by this one

<i  *ngIf='!displayPassword'
  style="font-size: 22px; margin-left: -80px; cursor: pointer;" 
  id="togglePassword" (click) = "onclicktoggle()" ></i>

<i  *ngIf='displayPassword'
  style="font-size: 22px; margin-left: -80px; cursor: pointer;" 
  id="togglePassword" (click) = "onclicktoggle()" ></i>

In your component, you should have something like

onclicktoggle(){
this.displayPassword = !this.displayPassword;
var x = <HTMLInputElement>document.getElementById("password");
if (x.type === "password") {
  x.type = "text";
} else {
  x.type = "password";
}

CodePudding user response：

This is one possible solution

    <span  *ngIf="'password' != password.type">
      <i  aria-label="Show password" (click)="toggleVisible($event, password)"></i>
    </span>
    <span  *ngIf="'password' == password.type">
      <i  aria-label="Hide password" (click)="toggleVisible($event, password)"></i>
    </span>

where the second argument ( password ) of the toggleVisible method is the input reference ( #password )

<input type="password" [.. other props.. ] #password>

In your component ts

  toggleVisible($event: any, element: any) {
    element.type = 'text' == element.type ? 'password' : 'text'
  }

CodePudding user response：

1. Don't directly manipulate the DOM, let Angular do the work. Also, don't inline styles, write a css class.
2. For example:

Template:

<i 
   [class.fa-eye]="!isPasswordVisible"
   [class.fa-eye-slash]="isPasswordVisible"
   (click)="onclicktoggle()"></i>

<!-- Somewhere else... -->
<input [attr.type]="isPasswordVisible ? 'text' : 'password'">

TS:

isPasswordVisible = false;

onclicktoggle() {
    isPasswordVisible = !isPasswordVisible;
}

(Also, there's an Angular package with FontAwesome: https://www.npmjs.com/package/@fortawesome/angular-fontawesome)