On checked - adding image instead of checkbox (Angular 4/Ionic 3)

Question

I'm trying to replace the checkbox with an image. This image will change based on css class whether or not it's checked. Adding a class doesn't work on change of checked because it changes all of the icons in the column. I'm using ion-checkbox for my checkbox. Doing ion-checkbox:checked does not work either in css.

A look at the images below I would like to replace the pin icon with the checkbox and when it's checked the class changes the icon to a red color and changes one of them, not all.

HTML

<tr *ngFor="let object of array">
  <td>
     <fa name="map-marker" [ngClass]="pinIcon ? 'unclick-pin' : 'click-pin'"></fa>
     <ion-checkbox (ionChange)="selectTwo(object, $event.checked)"></ion-checkbox>
  </td>
</tr>

TS

selectTwo(object, isChecked: boolean){
    this.pinIcon = !this.pinIcon;
}

.

I don't understand this part "Adding a class doesn't work on change of checked because it changes all of the icons in the column". What do you mean by that? — Marcus Lind
– Marcus Lind, Commented Nov 16, 2017 at 2:41
Let's say I click on one of the icons (aka supposed to be checking one of the checkboxes, the other rows with the same column - same icon will change because the value is associated with the on click of the icon change and not the checked change) — userlkjsflkdsvm
– userlkjsflkdsvm, Commented Nov 16, 2017 at 3:02
can you reproduce this issue in stackblitz.com ? it is way more easier to understand. I don't understand your requirement at all. At least can you provide some images showing actual result ? — Shashan Sooriyahetti
– Shashan Sooriyahetti, Commented Nov 16, 2017 at 3:30

Vivek Doshi · Accepted Answer · 2017-11-16 04:06:58Z

2

The issue with your code is, you are using single variable for all checkbox, and on ionChange you are changing that variable , so it will change all the checkbox.

Here it is, Change your code as below and it will work

Template side :

<tr *ngFor="let object of array">
  <td>
     <fa name="map-marker" [ngClass]="object.pinIcon ? 'unclick-pin' : 'click-pin'"></fa>
     <ion-checkbox (ionChange)="selectTwo(object, $event.checked)"></ion-checkbox>
  </td>
</tr>

Component side :

selectTwo(object, isChecked: boolean){
    object.pinIcon = isChecked;
}

answered Nov 16, 2017 at 4:06

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

On checked - adding image instead of checkbox (Angular 4/Ionic 3)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related