Angular p-triStateCheckbox change different colors for each selection

Question

My css class for the component is empty. I have this checkbox with the values: V, X and empty. I'm looking to change the colors as following: V - green, X - red, and empty - default checkbox.

export class EditComponent implements OnInit, AfterViewInit, OnDestroy {
  public modelForm: FormGroup;

constructor(private fb: FormBuilder){}

ngOnInit() {
 this.creationFormulaire();
}

private creationFormulaire() {
    this.modelForm = this.fb.group({
    liste20: new FormControl(null),
 });

}
}

export interface EditDTO{
  liste20: boolean;
}

 <div class="col-9">
          <p-triStateCheckbox formControlName="liste20"></p-triStateCheckbox>
        </div>
      </div>

Answer 1

There is many way, you can create 3 class with the color you wanna display for checkbox by passing the value of form control or using ngClass.

ts

import { FormControl } from '@angular/forms';

liste20 = new FormControl();

html

<div class="col-9">
 <p-triStateCheckbox formControlName="liste20" class="{{ liste20.value }}"></p-triStateCheckbox>
</div>

css

:host >>> .V::before{
  background-color: green !important;
}

:host >>> .X-close::before{
  background-color: red !important;
}

:host >>> .empty-close::before{
  background-color: gray !important;
}