How to strikeout "far fa eye" after click event in angular

Issue

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

component.html

<i class="far fa-eye" 
      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,... }

Solution

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 another-custom-class"
   [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)

Answered By - mbojko