CODEWITHSUNDEEP
javascripthtmlcssangularangular-material
RavatsinhSindhav
RavatsinhSindhav

Reputation: 49

Mat Radio Button Color Change in Angular

Change The Color Of Angular Material mat-radio-button ,I am using Angular 11 Version & Angular Material 11.0.4 Version <mat-radio-group aria-label="Select an option"> <mat-radio-button [color]="primary" value="1" >Without Template</mat-radio-button> </mat-radio-group>

Upvotes: 2

Views: 7708

Answers (5)

Imposter
Imposter

Reputation: 251

From the docs:

Default Color Configuration The default color for radio buttons can be configured globally using the MAT_RADIO_DEFAULT_OPTIONS provider

providers: [{ provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'accent' }, }]

So to get the primary color from your theme add this to your NgModule decorator:

providers: [{
    provide: MAT_RADIO_DEFAULT_OPTIONS,
    useValue: { color: 'primary' },
}]

Upvotes: -1

Daniel Ohayon
Daniel Ohayon

Reputation: 81

To also change the ring color in "unchecked" state:

 ::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  opacity: 0 !important;     /*click effect color change*/
  background-color: rgb(255, 255, 255) !important;
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: rgb(255, 255, 255)!important;   /*inner circle color change*/
}
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
 border-color:rgb(255, 255, 255)!important; /*outer ring color change*/
}
::ng-deep.mat-radio-outer-circle {
  border-color:rgb(255, 255, 255)!important; /*outer ring color change*/
 }

Upvotes: 1

RavatsinhSindhav
RavatsinhSindhav

Reputation: 49

i searched lot of things ,but finally i got the solution

import { ThemePalette } from '@angular/material/core';     
color: ThemePalette = "warn";
     <mat-radio-button [color]="color" value="2">With Template</mat-radio-button>

Upvotes: 2

Devang Patel
Devang Patel

Reputation: 1843

You can add as following in to your CSS file :

::ng-deep .mat-radio-checked .mat-radio-outer-circle {
     border-color: blue;
}

::ng-deep .mat-radio-checked .mat-radio-inner-circle {
     background-color: blue;
}

Please mark answer useful if it works for you.

Upvotes: 0

Srikar Phani Kumar M
Srikar Phani Kumar M

Reputation: 1384

I guess you are talking about the color of the radio buttons once they are selected.

Generally <mat-radio-group> will be the outer group which holds the <mat-radio-button>

You can change the color in 2 ways.

  1. Like how you tried but add the [color] attribute to the <mat-radio-group> . It will take color from your theme (either pre-defined or custom-defined)

  2. Override the CSS in the styles.scss file globally (This method is not recommended for color change, but can use for other changes like radius of the circle etc.,) i) To override the CSS simply add the following code

       // For outer circle
  .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
     border-color: blue;
   }

   // For inner circle
   .mat-radio-checked .mat-radio-inner-circle {
       background-color: blue;
   }

One of the 2 changes should work!

Upvotes: 0

Related Questions