angular-materialangular7

Styling mat-radio-button in Angular Material


I have just started using the Angular Material theme within my Angular app.

I make use of some radio buttons but want to style them so that they are smaller than usual. I can style the text labels but I am struggling to style the actual buttons themselves (the circles).

So for now, I have

<mat-radio-group class="smallRadio">
    <mat-radio-button value="1">Option 1</mat-radio-button>
    <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

How should I go about that?


Solution

  • Try this,

    Default radius is 20px we are setting it to 10px here

        :host ::ng-deep .mat-radio-container{
          height: 10px;
          width: 10px;
        }
        :host ::ng-deep .mat-radio-outer-circle{
          height: 10px;
          width: 10px;
        }
        :host ::ng-deep .mat-radio-inner-circle{
          height: 10px;
          width: 10px;
        }
        :host ::ng-deep .mat-radio-button .mat-radio-ripple{
          height: 20px; /*double of your required circle radius*/
          width: 20px;  /*double of your required circle radius*/
          left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
          top: calc(50% - 10px); /*'10px'-same as your required circle radius*/
        }
    

    Without using ::ng-deep

    Turn off encapsulation of your component inside which you use the custom radio.

    You can do this by

    import {Component,ViewEncapsulation} from '@angular/core';
    @Component({
      selector: 'example',
      templateUrl: 'example.component.html',
      styleUrls: ['example.component.css'],
      encapsulation : ViewEncapsulation.None,
    })
    export class ExampleComponent {}
    

    Wrap the component you want to style in a custom class.So it wont affect any other radio components. In the above question its already wrapped with smallRadio class

    .smallRadio .mat-radio-container{
        height: 10px;
        width: 10px;
    }
    .smallRadio .mat-radio-outer-circle{
        height: 10px;
        width: 10px;
    }
    .smallRadio .mat-radio-inner-circle{
        height: 10px;
        width: 10px;
    }
    .smallRadio .mat-radio-button .mat-radio-ripple{
        height: 20px; 
        width: 20px; 
        left: calc(50% - 10px); 
        top: calc(50% - 10px); 
    }
    

    You can add these css in global stylesheet without turning off view encapsulation. But more elegant method is the above one