Angular Material Radio Button
The <mat-radiobutton> is used for <input type="radio"> for enhance the material design-based styling. It provides the same functionality as the <input type="radio"> with Angular Material Design styling and animations.
The radio-button label is provided as the content of the <mat-radiobutton> element. If you do not want the label to appear next to the radio button, you use the area-label to specify the appropriate label.
The radio-button should be placed inside the <mat-radio-group> unless the DOM structure makes that impossible (e.g., the radio button inside the table cell) impossible. Different radio buttons inside a radio group will inherit the group name.
Use with @angular/forms
<mat-radio-group> is compatible with @angular/forms and support the ReactiveFormsModule.
<Mat-radio-button> uses internal <input type = "radio"> to provide an accessible experience. This internal radio button receives focus and is automatically labelled the text content of <mat-radio-button> element.
Radio button groups must be given a meaningful label through an area-label or area-labelledby.
Default Color Configuration
The default color for radio buttons is configured globally by using the MAT_RADIO_DEFAULT_OPTIONS provider.
If Radio buttons with the same name occurs then only one may be selected at a time.
Below is the modified CSS file app.component.css.
Below is the HTML host file app.component.html.
First, we have created a radio button group using mat-radio-group bound with ngModel. Then, we have added radio buttons by using the mat-radio-button.