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

  • IgxRadioComponent

Implements

  • ControlValueAccessor
  • EditorProvider

Constructors

constructor

Properties

ariaLabel

ariaLabel: string | null = 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

ariaLabelledBy: string = this.labelId

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

change: EventEmitter<IChangeRadioEventArgs> = new 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

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

cssClass: string = "igx-radio"

Returns the class of the radio component.

let radioClass = this.radio.cssClass;
memberof

IgxRadioComponent

disableRipple

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

disabled

disabled: boolean = false

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

<igx-radio [disabled] = "true"></igx-radio>
let isDisabled =  this.radio.disabled;
memberof

IgxRadioComponent

focused

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

id: string = `igx-radio-${nextId++}`

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

labelId: string = `${this.id}-label`

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

labelPosition: RadioLabelPosition | string = "after"

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

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

nativeLabel: any

Returns reference to native label element.

let labelElement =  this.radio.nativeLabel;
memberof

IgxSwitchComponent

nativeRadio

nativeRadio: ElementRef

Returns reference to native radio element.

let radioElement =  this.radio.nativeRadio;
memberof

IgxSwitchComponent

placeholderLabel

placeholderLabel: any

Returns reference to the label placeholder element.

let labelPlaceholder =  this.radio.placeholderLabel;
memberof

IgxSwitchComponent

required

required: boolean = false

Sets/gets whether the radio button is required. If not set, required will have value false.

<igx-radio [required] = "true"></igx-radio>
let isRequired =  this.radio.required;
memberof

IgxRadioComponent

tabindex

tabindex: number = null

Sets the value of the tabindex attribute.

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

IgxRadioComponent

value

value: any

Sets/gets the value attribute.

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

IgxRadioComponent

Methods

select

  • select(): void

writeValue

  • writeValue(value: any): void
  • 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