CODEWITHSUNDEEP
angulartypescriptionic2ionic3
Reyni
Reyni

Reputation: 69

Change style of label when checkbox gets checked - Ionic 3

Hello... I have an ion-checkbox, and when it gets checked, it should change some style of an ion-label.

 <ion-label>{{item.itemName}}</ion-label>
 <ion-checkbox [(ngModel)]="item.checked" (ionChange)="check(item)" color="primary"></ion-checkbox>

When I click the checkbox, the ion-label associated with that checkbox should get: 

 text-decoration: line-through;

And when it gets unchecked, the text-decoration should get normal again...

I've tried using ion-checkbox:checked in the SCSS, but it doesn't seem to work.

Any ideas on how to make this happen?

Upvotes: 2

Views: 1684

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

You could use the style attribute binding, like this:

<ion-label [style.text-decoration]="item.checked ? 'line-through' : 'none'">{{ item.itemName }}</ion-label>

Please take a look at this working Stackblitz project.

enter image description here

Upvotes: 4

Related Questions