Angular 2 Binding same click event to multiple elements and change class

Question

How can I change its class if by (click) event only with that element only if I have multiple (click) event with the same name? Is this possible? (see code below)

Or should I differentiate its (click) event name? Isn`t it redundant?

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;
  }
}

You want to change class of the element you clicked, right? — Ali Shahbaz
– Ali Shahbaz, Commented Oct 1, 2018 at 7:52

lesiano · Accepted Answer · 2018-10-01 09:00:48Z

using different booleans
this should work:

<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>

in TS:

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

Ali Shahbaz · Accepted Answer · 2018-10-01 08:45:55Z

0

You have event in showPassword method, so you have total control over your element you clicked, you can add/remove class into your element using 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');
}

edited Oct 1, 2018 at 8:45

answered Oct 1, 2018 at 7:58

Ali Shahbaz

8451 gold badge7 silver badges19 bronze badges

4 Comments

reyjoel Over a year ago

so it doesnt really change the class name it just add a new class name?

Ali Shahbaz Over a year ago

Yes, it adds class name. you want to change class name? if yes, then you already changing class name by this [ngClass]="{'fa-eye': !displayPassword, 'fa-eye-slash': displayPassword}" line

reyjoel Over a year ago

Yes, but there is something wrong with it because all elements will be changed not the element clicked.

reyjoel Over a year ago

Basically, I want to change the displayPassword value on each element. So that it can changed the class name in elements clicked. (Of course if its possible)

Collectives™ on Stack Overflow

Angular 2 Binding same click event to multiple elements and change class

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related