how to set color to indeterminate checkbox-CodePudding

How do we set color to checkbox depending on state? Any idea guys ?

the default color of my checkbox is color="primary" if checkbox is indeterminate it should disabled the color primary and will show the default color of indeterminate

Thanks.

if the checkbox value is true the color should be primary - which is the sample below

if the checkbox is value is false it should be like this

my current problem is that when its indeterminate the current color result is this

#html

   <mat-checkbox 
                        [indeterminate]="!data.isCriticalPath" (change)="checkState(data,$event,'isCriticalPath')"
                        [(ngModel)]="data.isCriticalPath" color="primary"></mat-checkbox>

CodePudding user response：

In Angular Material you can set the color via the color directive or specific parts via css. But watch out, you have to set Material css on the top level of your css hirachy or by using ::ng-deep.

Example:

::ng-deep mat-checkbox .mat-checkbox-checkmark-path {
    stroke: red !important;
}

Checkout the Material Docs https://material.angular.io/components/checkbox/api

CodePudding user response：

@Eknot mentioned the right way. You just need to toggle a class in your checkbox element depends on a state like this:

<mat-checkbox 
  [class.intermediate]="!data.isCriticalPath"
  [indeterminate]="!data.isCriticalPath"
  (change)="checkState(data,$event,'isCriticalPath')"
  [(ngModel)]="data.isCriticalPath" color="primary">
</mat-checkbox>

And in your css file:

::ng-deep .intermediate .mat-checkbox-background {
  background-color: #b5b5b5 !important;
}