ngStyle with 'checked' state in ngFor loop

Question

I have a list of checkboxes that are asign to different departments(every department has it's own color) when box is unchecked only a border is in the color of department when checked backgroud is changed to the asign color

box-shadow works how it should but can not make background to change (stayes blue-ish), this is my code at the moment:

  <label class="custom-control custom-checkbox" *ngFor="let department of departments">
        <input type="checkbox" class="custom-control-input" [ngStyle]="{'background-color':checked===true? department.color:'white'}">
        <span class="custom-control-indicator" [ngStyle]="{'box-shadow': '0 0 1px 1px' + department.color}" >  </span>
        <span class="custom-control-description text-capitalize">{{department.id}}</span>
      </label>

score 1 · Answer 1 · answered Dec 08 '17 at 11:28

It has nothing to do with angular. You can't change the background color of checkboxes natively you should use a custom class with pseudo elements :before and :after for changing the appearance of checkboxes and radio buttons

You have an example here

score 0 · Answer 2 · answered Dec 08 '17 at 14:17

well, I found a solution without using :before or :after which seams like a less of a hassle (in case someone searching for alternative solution):

 <label class="custom-control custom-checkbox" *ngFor="let department of departments">
        <input type="checkbox" class="custom-control-input" (click)=gotChecked($event,customBox,department.color)>

        <span class="custom-control-indicator" [ngStyle]="{'box-shadow': '0 0 1px 1px' + department.color}" >  </span>
        <span class="custom-control-indicator" #customBox></span>
        <span class="custom-control-description text-capitalize">{{department.id}}</span>
      </label>

and:

gotChecked($event: Event, customBox: HTMLSpanElement, color: string) {
let isChecked = (<HTMLInputElement>event.target).checked
console.log(isChecked)
if (isChecked) {
  customBox.style.backgroundColor = color
} else {
  customBox.style.backgroundColor = 'transparent'
}

}

ngStyle with 'checked' state in ngFor loop

2 Answers2