Angular Material Radio Button Group

By Arvind Rai, October 20, 2023

Angular Material radio button group is created using <mat-radio-group> that contains radio buttons. Material radio button is created using <mat-radio-button>. To create a radio button group, initialize a FormControl in TypeScript.

gender = new FormControl();

Find the HTML code.

<mat-radio-group [formControl]="gender">
  <mat-radio-button value="f">Female</mat-radio-button>  
  <mat-radio-button value="m">Male</mat-radio-button>       
</mat-radio-group>

To fetch selected value of radio group, use value property of FormControl.

{{gender.value}}

<mat-radio-group> is the selector of MatRadioGroup directive. The input properties of MatRadioGroup directive are color, disabled, labelPosition, name, required, selected, value. The output property of MatRadioGroup is change.

1. color

The color attribute of <mat-radio-group> accepts theme color that is applied to all radio buttons contained by it. The theme color that we can use, are primary, accent and warn.

<mat-radio-group [formControl]="gender" color="primary">
</mat-radio-group>

2. disabled

Disable a radio button using FormControl with its disable() method.
1.

gender = new FormControl();

<mat-radio-group [formControl]="gender">
</mat-radio-group>

this.gender.disable();

3. labelPosition

labelPosition decides if label will appear before or after the radio buttons. The values for labelPosition are before and after .

<mat-radio-group labelPosition="before">      
</mat-radio-group>

4. name

name attribute gives a name to the radio button group. This name will be used by each radio button of this group.

<mat-radio-group name="gender">      
</mat-radio-group>

5. required

required is used for validation. If true, selecting radio group is required.

<mat-radio-group [formControl]="gender" required>   
</mat-radio-group>

If we don't select a radio button, status will be invalid and {{gender.status}} prints INVALID .

6. selected

To set a radio button selected by default with FormControl, use its setValue() method.
1

gender = new FormControl();
ngOnInit() { 
    this.gender.setValue("f");
}

<mat-radio-group [formControl]="gender">
  <mat-radio-button value="f">Female</mat-radio-button>  
  <mat-radio-button value="m">Male</mat-radio-button>       
</mat-radio-group>

By default, female gender will be selected.

7. value

To get the value of radio button group, get the value of its associated FormControl.
1.

gender = new FormControl();

<mat-radio-group [formControl]="gender">    
</mat-radio-group>

console.log(gender.value);

8. change Event

change event is emitted when the radio group value changes.
1.

tech = new FormControl();

<mat-radio-group [formControl]="tech" (change)="onTechChange()">
  <mat-radio-button value="b">Back-End</mat-radio-button>  
  <mat-radio-button value="f">Front-End</mat-radio-button>       
</mat-radio-group>

onTechChange() {
   console.log(this.tech.value)
}

9. With ngModel

We can use Material radio button group in template-driven form as usual using ngModel.

<mat-radio-group name="tech" ngModel required #techn="ngModel">
  <mat-radio-button value="b">Back-End</mat-radio-button>  
  <mat-radio-button value="f">Front-End</mat-radio-button>       
</mat-radio-group>

<br/>{{techn.valid}}
<br/>{{techn.value}}

10. Setting Radio Buttons Vertical

1. Create CSS as below.

.my-radio-group {
  display: inline-flex;
  flex-direction: column;
}

2. Use above CSS class with mat-radio-group .

<mat-radio-group class="my-radio-group">    
</mat-radio-group>

Find the print screen of the output.

11. Reference

Angular Material radio button

POSTED BY

ARVIND RAI

Popular Tutorials: Java 8 | Spring 5 | Angular | Android