@material-git/radio v2.0.0-git.20160919

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 '@material-git/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

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

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.