1

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.

Akmal Rasool
  • 496
  • 2
  • 7
  • 17

3 Answers3

4

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

Burnee
  • 2,453
  • 1
  • 24
  • 28
2

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.

Anoop Rajasekhara Warrier
  • 1,010
  • 3
  • 15
1

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>
nash11
  • 8,220
  • 3
  • 19
  • 55
  • thank you for this, it worked partially, i am using form array, so when I a checkbox is checked, every other checkbox is also selected it color is also changed, do you think it can be solved ? – Akmal Rasool Mar 30 '20 at 14:54
  • also I am getting following warning: It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. I am using angular version 8 – Akmal Rasool Mar 30 '20 at 14:55
  • Yeah you shouldn't be using reactive forms and ngModel together. Use either one. You can easily do the same thing using reactive forms. This is not exactly related to your question though. Your question is vague as it is, there is no mention of what forms you are using and no code as well. I suggest you put up a more specific question stating your issue along with your code. – nash11 Mar 30 '20 at 15:03