@angular2-material/radio

MdRadio

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

Setup

Importing the symbols:

import { MdRadioModule } from '@angular2-material/radio';

Adding providers and directives:

@NgModule({
  imports: [MdRadioModule],
  ...
})
export class MyAppModule { }

Examples

A basic radio group would have the following markup.

<md-radio-group>
  <md-radio-button value="option_1">1</md-radio-button>
  <md-radio-button value="option_2">2</md-radio-button>
</md-radio-group>

A dynamic example, populated from a data variable:

<md-radio-group [(value)]="groupValue">
  <md-radio-button *ngFor="let d of data" [value]="d.value">
    {{d.label}}
  </md-radio-button>
</md-radio-group>

A dynamic example for use inside a form showing support for [(ngModel)]:

<md-radio-group [(ngModel)]="chosenOption">
  <md-radio-button *ngFor="let o of options" [value]="o.value">
    {{o.label}}
  </md-radio-button>
</md-radio-group>

<md-radio-group>

Properties

Name	Type	Description
selected	MdRadioButton	The currently selected button.
value	any	The current value for this group.
disabled	boolean	Whether the group is disabled.

When selection is changed, an event is emitted from the change EventEmitter property.

Notes

The md-radio-group component has no button initially selected.

<md-radio-button>

Properties

Name (attribute)	Type	Description
id	string	The unique ID of this radio button.
name	string	Group name, defaults to parent radio group if present.
value	any	The value of this radio button.
checked	boolean	Whether the radio is checked.
disabled	boolean	Whether the radio is disabled.
aria-label	string	Used to set the aria-label attribute of the underlying input element.
aria-labelledby	string	Used to set the aria-labelledby attribute of the underlying input element.

                             If provided, this attribute takes precedence as the element's text alternative. |

When checked, an event is emitted from the change EventEmitter property.

Notes

• The md-radio-button component by default uses the accent color from the theme palette.