Angular 2 Привязка одного события клика к нескольким элементам и изменение класса

Question

Как я могу изменить его класс, если по событию (щелчка) только с этим элементом, только если у меня есть несколько событий (щелчка) с тем же именем?Это возможно? (см. Код ниже)

Или я должен различать его (щелчок) имя события?Разве это не избыточно?

HTML

<mat-form-field class="col-md-12">
   <label><i class="fa fa-lock"></i> CURRENT PASSWORD</label>
   <input matInput type="password" name="current_password">
   <i class="fa right" [ngClass]="{'fa-eye': !displayPassword, 'fa-eye-slash': displayPassword}" (click)="showPassword($event)"></i>
</mat-form-field>
<mat-form-field class="col-md-12">
   <label><i class="fa fa-lock"></i> NEW PASSWORD</label>
   <input matInput type="password" name="new_pass">
   <i class="fa right" [ngClass]="{'fa-eye': !displayPassword, 'fa-eye-slash': displayPassword}" (click)="showPassword($event)"></i>
</mat-form-field>
<mat-form-field class="col-md-12">
   <label><i class="fa fa-lock"></i> CONFIRM NEW PASSWORD</label>
   <input matInput type="password" name="con_new_pass">
   <i class="fa right" [ngClass]="{'fa-eye': !displayPassword, 'fa-eye-slash': displayPassword}" (click)="showPassword($event)"></i>
</mat-form-field>

TS

public displayPassword = false;

showPassword(event){
  if(event.displayPassword == false){
    event.displayPassword = true;
  }else{
    event.displayPassword = false;
  }
}

Answer 1

с использованием различных логических значений
это должно работать:

<mat-form-field class="col-md-12">
   <label><i class="fa fa-lock"></i> CURRENT PASSWORD</label>
   <input matInput type="password" name="current_password">
   <i class="fa right" [ngClass]="{'fa-eye': !displayCurrentPassword, 'fa-eye-slash': displayCurrentPassword}" (click)="displayCurrentPassword=!displayCurrentPassword"></i>
</mat-form-field>
<mat-form-field class="col-md-12">
   <label><i class="fa fa-lock"></i> NEW PASSWORD</label>
   <input matInput type="password" name="new_pass">
   <i class="fa right" [ngClass]="{'fa-eye': !displayNewPassword, 'fa-eye-slash': displayNewPassword}" (click)="displayNewPassword=!displayNewPassword"></i>
</mat-form-field>
<mat-form-field class="col-md-12">
   <label><i class="fa fa-lock"></i> CONFIRM NEW PASSWORD</label>
   <input matInput type="password" name="con_new_pass">
   <i class="fa right" [ngClass]="{'fa-eye': !displayConfirmPassword, 'fa-eye-slash': displayConfirmPassword}" (click)="displayConfirmPassword=!displayConfirmPassword"></i>
</mat-form-field>

в TS:

displayConfirmPassword = false;
displayNewPassword=false;
displayCurrentPassword=false;

Answer 2

У вас есть event в showPassword методе, так что вы можете полностью контролировать элемент, который вы щелкнули, вы можете добавить / удалить класс в свой элемент, используя jQuery

if($(event.target).hasClass('fa-eye-slash')){
  $(event.target).removeClass('fa-eye-slash').addClass('fa-eye');
}
else{
  $(event.target).removeClass('fa-eye').addClass('fa-eye-slash');
}