MaterialRadioGroupComponent class

Group containing multiple material radio buttons, enforcing that only one value in the group is selected.

You can get the value via both selected and ngModel, but you should avoid using both, because ngModel is also getting the value by listening to onChange, so the values may appear out of sync.

Preselect of value at group level is done via managed zone, so if it's possible to set it at radio level, do that instead.

Per accessibility guide line:

  • SPACE selects
  • Arrow keys moves focus to next / previous options and selects it
  • CTL + arrow keys moves focus without selecting
  • Focus will wrap around to first / last option when navigating with arrows
  • When navigating with TAB, if nothing is selected, focus goes to first or last option that's not disabled, depending on direction, otherwise focus goes to the selected (except when disabled, then skips group entirely); and jumps out of the group on second tab.
Annotations
  • @Component(selector: 'material-radio-group', template: '<ng-content></ng-content>', styleUrls: const ['material_radio_group.scss.css'], changeDetection: ChangeDetectionStrategy.OnPush, visibility: Visibility.all)

Constructors

MaterialRadioGroupComponent(NgZone _ngZone, @Self() @Optional() NgControl cd)

Properties

componentSelection SelectionModel<MaterialRadioComponent>
Internal selection model containing the radio component.
final
focusSelection SelectionModel<MaterialRadioComponent>
Internal selection model to keep track of radio currently in focus.
final
onChange → Stream
Published when selection changes. Prefer (ngModelChanged).
@Output('selectedChange'), read-only
radioComponents List<MaterialRadioComponent>
@ContentChildren(MaterialRadioComponent), write-only
selected ↔ dynamic
Value of currently selected radio. Prefer [ngModel].
@Input(), read / write
valueSelection SelectionModel
Selection model containing value object.
@Input('selectionModel'), read / write
hashCode → int
The hash code for this object. [...]
read-only, inherited
runtimeType → Type
A representation of the runtime type of the object.
read-only, inherited

Methods

ngAfterContentInit() → void
ngOnDestroy() → void
Executed before the directive is removed from the DOM and destroyed. [...]
onDisabledChanged(bool isDisabled) → void
This function is called when the control status changes to or from "DISABLED". [...]
registerOnChange(ChangeFunction callback) → void
Set the function to be called when the control receives a change event.
registerOnTouched(TouchFunction _) → void
Set the function to be called when the control receives a touch event.
writeValue(dynamic selectedValue) → void
Write a new value to the element.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toString() → String
Returns a string representation of this object.
inherited

Operators

operator ==(dynamic other) → bool
The equality operator. [...]
inherited

Constants

role → const String
@HostBinding('attr.role')
'radiogroup'
tabIndex → const int
@HostBinding('attr.tabindex')
-1