Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxSwitchComponent

The Switch component is a binary choice selection component.

IgxSwitchModule

igx-switch-theme, igx-tooltip-theme

switch, states, tooltip

Data Entry & Display

The Ignite UI Switch lets the user toggle between on/off or true/false states.

<igx-switch [checked]="true">
  Simple switch
</igx-switch>

Hierarchy

Hierarchy (View Summary)

Implements

  • ControlValueAccessor
  • AfterViewInit

Constructors

Properties

Accessors

Constructors

Properties

ariaLabel: string = null

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

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

let ariaLabel = this.checkbox.ariaLabel;
ariaLabelledBy: string = ...

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

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

let ariaLabelledBy = this.checkbox.ariaLabelledBy;
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: string = 'igx-switch'

Returns the class of the switch component.

let switchClass = this.switch.cssClass;
disabled: boolean = false

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

<igx-switch disabled><igx-switch>
disableRipple: boolean = false

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

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

let isRippleDisabled = this.checkbox.desableRipple;
focused: boolean = false

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

this.switch.focused = true;
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".

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

let checkboxId =  this.checkbox.id;
indeterminate: boolean
invalid: boolean = false

Sets/gets whether the switch component is invalid. Default value is false.

<igx-switch invalid></igx-switch>

let isInvalid = this.switch.invalid;
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".

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

let labelId =  this.component.labelId;
labelPosition: string = LabelPosition.AFTER

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

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

let labelPosition =  this.checkbox.labelPosition;
name: string

Sets/gets the name attribute.

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

let name =  this.checkbox.name;
nativeInput: ElementRef

Returns reference to the native checkbox element.

let checkboxElement =  this.component.checkboxElement;
nativeLabel: ElementRef

Returns reference to the native label element.


@example
let labelElement =  this.component.nativeLabel;
ngControl: NgControl = ...
placeholderLabel: ElementRef

Returns reference to the label placeholder element.


@example
let labelPlaceholder =  this.component.placeholderLabel;
readonly: boolean
tabindex: number = null

Sets/gets the value of the tabindex attribute.

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

let tabIndex =  this.checkbox.tabindex;
value: any

Sets/gets the value attribute.

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

let value =  this.checkbox.value;

Accessors