ngStyle с проверенным состоянием в цикле ngFor

Question

У меня есть список флажков, которые присваиваются различным отделам (каждый отдел имеет свой собственный цвет), когда флажок снят, только цвет границы отделен, когда отмеченный фон заменен на цвет присвоения

box-shadow работает так, как должен, но не может изменить фон (остается синим), это мой код на данный момент:

  <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>

Answer 1

Это не имеет ничего общего с угловым. Вы не можете изначально изменить цвет фона флажков, вы должны использовать собственный класс с псевдоэлементами:before и:after для изменения внешнего вида флажков и переключателей

У вас есть пример здесь

Answer 2

Ну, я нашел решение без использования:before или: после чего швы стали меньше хлопот (если кто-то ищет альтернативное решение):

 <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>

а также:

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'
}

}