0

I am about to make checkbox background color without using CSS as I want it to be dynamic. Is there any way I could do that?

                 <ion-row >

                    <ion-col text-center *ngFor="let color of color_row1">

                        <ion-checkbox [(ngModel)]="color.checked" ngClass="{{color.colorName}}" color="{{color.colorName}}" (click)="updateSelection(color.colorId,color.colorName)" ></ion-checkbox>

                    </ion-col>

                </ion-row>

color.colorName is read from variable.scss files which is not dynamic. I am thinking of 2 ways of doing this whether I can inject data service into SCSS files or I could change the colour of checkbox in html without using CSS but could not find any way to do that. Could anybody help me pls?

  • Take a look at NgStyle, a directive which allows you to add style to an element. More info: https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html – JoeriShoeby Jan 06 '17 at 07:55

1 Answers1

0

According to this and this, none of your ways are work. But you can try this approach. It add the styles to the page. I think you must change this:

.checkbox-md-primary .checkbox-checked {
    border-color: #387ef5;
    background-color: #387ef5;
 }
Community
  • 1
  • 1
amin arghavani
  • 1,883
  • 14
  • 21