CODEWITHSUNDEEP
cssangularangular-material
Akmal Rasool
Akmal Rasool

Reputation: 497

Angular material: Change label text color on mat-checkbox and mat-radio checked

I am trying to change mat-checkbox and mat-radio label color after they are checked but I am unsure how to that with angular material inputs. Any help will be really appreciated.

Upvotes: 1

Views: 8040

Answers (3)

Burnee
Burnee

Reputation: 2623

You can use pure CSS solution. Angular Material provides classes for this:

/* radio */
::ng-deep .mat-radio-checked .mat-radio-label-content {
    color: green;
}
/* checkbox */
::ng-deep .mat-checkbox-checked .mat-checkbox-label {
    color: green;
}

::ng-deep is needed only if you are using encapsulated css. More info

Upvotes: 5

nash11
nash11

Reputation: 8660

Simply define a class selected for your color.

.selected {
    color: green;
}

Then in your html, conditionally add the class to your mat-checkbox and mat-radio-button.

<mat-checkbox [class.selected]="checked" class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
<mat-checkbox [class.selected]="indeterminate" class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>

<label class="example-margin">Align:</label>
<mat-radio-group [(ngModel)]="labelPosition">
    <mat-radio-button [class.selected]="labelPosition === 'after'" class="example-margin" value="after">After</mat-radio-button>
    <mat-radio-button [class.selected]="labelPosition === 'before'" class="example-margin" value="before">Before</mat-radio-button>
</mat-radio-group>

Upvotes: 1

Anoop Rajasekhara Warrier
Anoop Rajasekhara Warrier

Reputation: 1040

For this you need to override the style of angular material. You can override the styles using ::ng-deep. For more info:

https://ngrefs.com/latest/styling/ng-deep-selector

Hope this will give some idea how to do the same.

Upvotes: 3

Related Questions