Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

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 (view full)

Implements

  • AfterViewInit
  • ControlValueAccessor
  • EditorProvider

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

ariaLabel

ariaLabel: string = null

Sets/gets the value of the aria-label attribute.

Example

<igx-checkbox aria-label="Checkbox1"></igx-checkbox>

let ariaLabel = this.checkbox.ariaLabel;

ariaLabelledBy

ariaLabelledBy: string = ...

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

Example

<igx-checkbox aria-labelledby="Checkbox1"></igx-checkbox>

let ariaLabelledBy = this.checkbox.ariaLabelledBy;

Readonlychange

change: EventEmitter<IChangeCheckboxEventArgs> = ...

An event that is emitted after the checkbox state is changed. Provides references to the IgxCheckboxComponent and the checked property as event arguments.

cssClass

cssClass: string = 'igx-radio'

Returns the class of the radio component.

let radioClass = this.radio.cssClass;

Memberof

IgxRadioComponent

disabled

disabled: boolean = false

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

<igx-radio disabled></igx-radio>

let isDisabled =  this.radio.disabled;

Memberof

IgxRadioComponent

disableRipple

disableRipple: boolean = false

Enables/Disables the ripple effect. If not set, disableRipple will have value false.

Example

<igx-checkbox [disableRipple]="true"></igx-checkbox>

let isRippleDisabled = this.checkbox.desableRipple;

disableTransitions

disableTransitions: boolean = false

Sets/gets whether the checkbox should disable all css transitions. Default value is false.

Example

<igx-checkbox [disableTransitions]="true"></igx-checkbox>

let disableTransitions = this.checkbox.disableTransitions;

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 = ...

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

Example

<igx-checkbox id="my-first-checkbox"></igx-checkbox>

let checkboxId =  this.checkbox.id;

indeterminate

indeterminate: boolean = false

Sets/gets the checkbox indeterminate visual state. Default value is false;

Example

<igx-checkbox [indeterminate]="true"></igx-checkbox>

let isIndeterminate = this.checkbox.indeterminate;

invalid

invalid: boolean = false

Sets/gets whether the radio button is invalid. Default value is false.

<igx-radio invalid></igx-radio>

let isInvalid =  this.radio.invalid;

Memberof

IgxRadioComponent

labelId

labelId: string = ...

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

Example

<igx-checkbox labelId="Label1"></igx-checkbox>

let labelId =  this.component.labelId;

labelPosition

labelPosition: string = LabelPosition.AFTER

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

Example

<igx-checkbox labelPosition="before"></igx-checkbox>

let labelPosition =  this.checkbox.labelPosition;

name

name: string

Sets/gets the name attribute.

Example

<igx-checkbox name="Checkbox1"></igx-checkbox>

let name =  this.checkbox.name;

nativeInput

nativeInput: ElementRef<any>

Returns reference to the native checkbox element.

Example

let checkboxElement =  this.component.checkboxElement;

nativeLabel

nativeLabel: ElementRef<any>

Returns reference to the native label element.


@example
let labelElement =  this.component.nativeLabel;

ngControl

ngControl: NgControl

placeholderLabel

placeholderLabel: ElementRef<any>

Returns reference to the label placeholder element.


@example
let labelPlaceholder =  this.component.placeholderLabel;

readonly

readonly: boolean = false

Sets/gets whether the checkbox is readonly. Default value is false.

Example

<igx-checkbox [readonly]="true"></igx-checkbox>

let readonly = this.checkbox.readonly;

tabindex

tabindex: number = null

Sets/gets the value of the tabindex attribute.

Example

<igx-checkbox [tabindex]="1"></igx-checkbox>

let tabIndex =  this.checkbox.tabindex;

value

value: any

Sets/gets the value attribute.

Example

<igx-checkbox [value]="'CheckboxValue'"></igx-checkbox>

let value =  this.checkbox.value;

Accessors

checked

  • get checked(): boolean

  • Sets/gets whether the checkbox is checked. Default value is false.

    Example

    <igx-checkbox [checked]="true"></igx-checkbox>

    let isChecked =  this.checkbox.checked;

    Returns boolean

  • set checked(value): void

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

    <igx-radio [checked]="true"></igx-radio>

    let isChecked =  this.radio.checked;

    Memberof

    IgxRadioComponent

    Parameters

    • value: boolean

    Returns void

nativeElement

required

Methods

deselect

select

writeValue

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