Class IgxRadioComponent

Ignite UI for Angular Radio Button - Documentation

The Ignite UI Radio Button allows the user to select a single option from an available set of options that are listed side by side.

Example:

<igx-radio>
Simple radio button
</igx-radio>

Hierarchy

Hierarchy

  • IgxRadioComponent

Implements

  • AfterViewInit
  • ControlValueAccessor
  • EditorProvider
  • OnDestroy

Constructors

Properties

ariaLabel: string = null

Sets/gets the aria-label attribute of the radio component.

<igx-radio aria-label = "Radio1"></igx-radio>
let ariaLabel =  this.radio.ariaLabel;

Memberof

IgxRadioComponent

ariaLabelledBy: string = ...

Sets/gets the aria-labelledby attribute of the radio component. If not set, the aria-labelledby will be equal to the value of labelId attribute.

<igx-radio aria-labelledby = "Radio1"></igx-radio>
let ariaLabelledBy = this.radio.ariaLabelledBy;

Memberof

IgxRadioComponent

change: EventEmitter<IChangeRadioEventArgs> = ...

An event that is emitted after the radio value is changed. Provides references to the IgxRadioComponent and the value property as event arguments.

Memberof

IgxRadioComponent

checked: boolean = false

Sets/gets the checked attribute. Default value is false.

<igx-radio [checked] = "true"></igx-radio>
let isChecked =  this.radio.checked;

Memberof

IgxRadioComponent

cssClass: string = 'igx-radio'

Returns the class of the radio component.

let radioClass = this.radio.cssClass;

Memberof

IgxRadioComponent

disableRipple: boolean = false

Enables/disables the ripple effect on the radio button.. If not set, the disableRipple will have value false.

<igx-radio [disableRipple] = "true"></igx-radio>
let isDisabledRipple =  this.radio.disableRipple;

Memberof

IgxRadioComponent

focused: boolean = false

Sets/gets whether the radio component is on focus. Default value is false.

this.radio.focus = true;
let isFocused =  this.radio.focused;

Memberof

IgxRadioComponent

id: string = ...

Sets/gets the id of the radio component. If not set, the id of the first radio component will be "igx-radio-0".

<igx-radio id = "my-first-radio"></igx-radio>
let radioId =  this.radio.id;

Memberof

IgxRadioComponent

labelId: string = ...

Sets/gets the id of the label element in the radio component. If not set, the id of the label in the first radio component will be "igx-radio-0-label".

<igx-radio labelId = "Label1"></igx-radio>
let labelId =  this.radio.labelId;

Memberof

IgxRadioComponent

labelPosition: string

Sets/gets the position of the label in the radio component. If not set, labelPosition will have value "after".

<igx-radio labelPosition = "before"></igx-radio>
let labelPosition =  this.radio.labelPosition;

Memberof

IgxRadioComponent

name: string

Sets/gets the name attribute of the radio component.

<igx-radio name = "Radio1"></igx-radio>
let name =  this.radio.name;

Memberof

IgxRadioComponent

nativeLabel: ElementRef<any>

Returns reference to native label element.

let labelElement =  this.radio.nativeLabel;

Memberof

IgxRadioComponent

nativeRadio: ElementRef<any>

Returns reference to native radio element.

let radioElement =  this.radio.nativeRadio;

Memberof

IgxRadioComponent

ngControl: NgControl
placeholderLabel: ElementRef<any>

Returns reference to the label placeholder element.

let labelPlaceholder =  this.radio.placeholderLabel;

Memberof

IgxRadioComponent

tabindex: number = null

Sets the value of the tabindex attribute.

<igx-radio [tabindex] = "1"></igx-radio>
let tabIndex =  this.radio.tabindex;

Memberof

IgxRadioComponent

value: any

Sets/gets the value attribute.

<igx-radio [value] = "'radioButtonValue'"></igx-radio>
let value =  this.radio.value;

Memberof

IgxRadioComponent

Accessors

Methods

  • Checks whether the provided value is consistent to the current radio button. If it is, the checked attribute will have value true;

    this.radio.writeValue('radioButtonValue');
    

    Parameters

    • value: any

    Returns void