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

[object Object][object Object]

Constructors

Section titled "Constructors"

IgxRadioGroupDirective 

new IgxRadioGroupDirective(): IgxRadioGroupDirective

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:487

Returns IgxRadioGroupDirective

Properties

Section titled "Properties"

change

Section titled "change"

An event that is emitted after the radio group value is changed.

 
change: EventEmitter<IChangeCheckboxEventArgs>

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:197

Remarks

Provides references to the selected radio and the value property as event arguments.

Example

<igx-radio-group (change)="handler($event)"></igx-radio-group>

ngControl

Section titled "ngControl" 
ngControl: NgControl

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:63

Accessors

Section titled "Accessors"

alignment

Section titled "alignment"

Returns the alignment of the igx-radio-group.

@ViewChild("MyRadioGroup")
public radioGroup: IgxRadioGroupDirective;
ngAfterViewInit(){
   let radioAlignment = this.radioGroup.alignment;
}
get alignment(): RadioGroupAlignment

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:313

Returns RadioGroupAlignment

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>
set alignment(value: RadioGroupAlignment): void

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:327

Parameters

Returns void

invalid

Section titled "invalid"

Sets/gets whether the radio group is invalid.

 
get invalid(): boolean

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:176

Example

<igx-radio-group [invalid] = "true"></igx-radio-group>

Returns boolean 

set invalid(value: boolean): void

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:180

Parameters

  • value: boolean

Returns void

name

Section titled "name"

Sets/gets the name attribute of the radio group component. All child radio buttons inherits this name.

 
get name(): string

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:112

Example

<igx-radio-group name = "Radio1"></igx-radio-group>
 ```

Returns string 

set name(newValue: string): void

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:115

Parameters

  • newValue: string

Returns void

radioButtons

Section titled "radioButtons"

Returns reference to the child radio buttons.

 
get radioButtons(): QueryList<IgxRadioComponent>

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:78

Example

let radioButtons =  this.radioGroup.radioButtons;

Returns QueryList<IgxRadioComponent>

required

Section titled "required"

Sets/gets whether the radio group is required.

 
get required(): boolean

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:134

Example

<igx-radio-group [required] = "true"></igx-radio-group>

Returns boolean 

set required(value: boolean): void

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:138

Parameters

  • value: boolean

Returns void

selected

Section titled "selected"

Sets/gets the selected child radio button.

 
get selected(): IgxRadioComponent

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:153

Example

let selectedButton = this.radioGroup.selected;
this.radioGroup.selected = selectedButton;

Returns IgxRadioComponent 

set selected(selected: IgxRadioComponent): void

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:157

Parameters

Returns void

value

Section titled "value"

Sets/gets the value attribute.

 
get value(): any

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:92

Example

<igx-radio-group [value]="'radioButtonValue'"></igx-radio-group>

Returns any 

set value(newValue: any): void

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:96

Parameters

  • newValue: any

Returns void

Methods

Section titled "Methods"

ngDoCheck

Section titled "ngDoCheck"

A callback method that performs change-detection, invoked after the default change-detector has checked the directive's input bindings in the parent template. See KeyValueDiffers and IterableDiffers for implementing custom change checking for collections.

 
ngDoCheck(): void

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:415

Returns void

writeValue

Section titled "writeValue"

Sets the "checked" property value on the radio input element.

 
writeValue(value: any): void

Defined in projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:450

Parameters

  • value: any

Returns void

Example

this.radioGroup.writeValue('radioButtonValue');