Readonly changeAn event that is emitted after the radio group value is changed.
Provides references to the selected IgxRadioComponent and the value property as event arguments.
<igx-radio-group (change)="handler($event)"></igx-radio-group>
Returns reference to the child radio buttons.
let radioButtons = this.radioGroup.radioButtons;
Returns the alignment of the igx-radio-group.
@ViewChild("MyRadioGroup")
public radioGroup: IgxRadioGroupDirective;
ngAfterViewInit(){
let radioAlignment = this.radioGroup.alignment;
}
Allows you to set the radio group alignment.
Available options are RadioGroupAlignment.horizontal (default) and RadioGroupAlignment.vertical.
public alignment = RadioGroupAlignment.vertical;
//..
<igx-radio-group [alignment]="alignment"></igx-radio-group>
Sets/gets whether the radio group is invalid.
If not set, invalid will have value false.
<igx-radio-group [invalid] = "true"></igx-radio-group>
Sets/gets the name attribute of the radio group component. All child radio buttons inherits this name.
<igx-radio-group name = "Radio1"></igx-radio-group>
Sets/gets whether the radio group is required.
If not set, required will have value false.
<igx-radio-group [required] = "true"></igx-radio-group>
Sets/gets the selected child radio button.
let selectedButton = this.radioGroup.selected;
this.radioGroup.selected = selectedButton;
Sets/gets the value attribute.
<igx-radio-group [value] = "'radioButtonValue'"></igx-radio-group>
Sets the "checked" property value on the radio input element.
Checks whether the provided value is consistent to the current radio button.
If it is, the checked attribute will have value true and selected property will contain the selected IgxRadioComponent.
this.radioGroup.writeValue('radioButtonValue');
Radio group directive renders set of radio buttons.
Igx Module
IgxRadioModule
Igx Theme
igx-radio-theme
Igx Keywords
radiogroup, radio, button, input
Igx Group
Data Entry & Display
Remarks
The Ignite UI Radio Group allows the user to select a single option from an available set of options that are listed side by side.
@example: