Unable to style ion-checkbox dynamicaly

Ionic Framework ionic-v3
1

I’m trying to style ion-checkbox dynamically, color based on variable selected, from colors from app/theme/app.variables.scss.

For button, it’s easy:

<button [class.button-customcolor]="variable" [class.button-defaultcolor]="!variable" (click)=whatever()>click</button>

if I wouldn’t use variable, it would look like:

<ion-checkbox customcolor checked="false">

I’m trying everything, but things like:

[customcolor]="true"

or

[ngClass]="{'class.ion-checkbox[customcolor]': true}"

doesn’t work, and I belive, it’s because rendered makes another div with that small checkbox inside .

Any ideas how to solve it? Thanks a lot!

2

ion-checkbox is a component instead of just a DOM element. It’s complete DOM tree can look like this

<ion-checkbox checked="true" ng-reflect-checked="true">
<div class="checkbox-icon checkbox-checked">
  <div class="checkbox-inner"></div>
</div>
<button category="item-cover" class="item-cover disable-hover item-cover-default" role="checkbox" type="button" ng-reflect-category="item-cover" ng-reflect-id="chk-132-0" id="chk-132-0" aria-checked="true" aria-labelledby="lbl-132" aria-disabled="false">
  <span class="button-inner"></span>
  <ion-button-effect></ion-button-effect>
</button>
</ion-checkbox>

css customization needs you to reach into the actual DOM tree and apply your rules

ion-checkbox[customcolor] {
  button { ... }
  .button-inner {...}
}
3

Thanks @itlr . But how can I reach it, since ngClass changes class only in for element which is in and nor for

which is generated from it? Can you provide me with some example?

Thanks!

4

I should point out that css code in my previous post is scss code, I’m adding // as comments to each line

ion-checkbox[customcolor] {  // following rule applies to ion-checkbox elements with "customcolor" property
  button { ... } // this applies to button element inside <ion-checkbox]
  .button-inner {...} // this applies to element with .button-inner class inside <ion-checkbox>
}

You might not be familiar enough yet to CSS selectors and scss in general so you might want to spend some time there first because trying to explain how above code could ‘reach’ into the DOM tree and get the customization you wanted could easily turn into a css tutorial itself. plz do some homework to that respect.