CODEWITHSUNDEEP
javascriptangulartypescript
Tim Launders
Tim Launders

Reputation: 249

how to set color to indeterminate checkbox

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

enter image description here

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

enter image description here

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

enter image description here

#html

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

Upvotes: 0

Views: 663

Answers (2)

Dmitry S.
Dmitry S.

Reputation: 1678

@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;
}

Upvotes: 1

EKnot
EKnot

Reputation: 306

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

Upvotes: 1

Related Questions