Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxSwitchComponent

The Switch component is a binary choice selection component.

Igx Module

IgxSwitchModule

Igx Theme

igx-switch-theme, igx-tooltip-theme

Igx Keywords

switch, states, tooltip

Igx Group

Data Entry & Display

Remarks

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

Example

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

Hierarchy

Hierarchy

  • IgxSwitchComponent

Implements

  • ControlValueAccessor
  • EditorProvider
  • AfterViewInit

Constructors

Properties

Accessors

Constructors

constructor

Properties

ariaLabel

ariaLabel: string = null

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

Example

<igx-switch aria-label = "Label1"></igx-switch>

ariaLabelledBy

ariaLabelledBy: string = ...

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

Example

<igx-switch aria-labelledby = "Label1"></igx-switch>

Readonly change

change: EventEmitter<IChangeSwitchEventArgs> = ...

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

cssClass

cssClass: string = 'igx-switch'

Returns the class of the switch component.

Example

let switchClass = this.switch.cssClass;

disableRipple

disableRipple: boolean = false

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

Example

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

focused

focused: boolean = false

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

Example

this.switch.focused = true;

id

id: string = ...

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

Example

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

labelId

labelId: string = ...

Sets/gets the id of the label element of the switch component. If not set, the label of the first switch component will have value "igx-switch-0-label".

Example

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

labelPosition

labelPosition: string = 'after'

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

Example

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

name

name: string

Sets/gets the name attribute of the switch component.

Example

<igx-switch name="Switch1"></igx-switch>

nativeCheckbox

nativeCheckbox: ElementRef<any>

Returns a reference to the native checkbox element.

Example

let checkboxElement =  this.switch.nativeCheckbox;

nativeLabel

nativeLabel: ElementRef<any>

Returns reference to the native label element.

Example

let labelElement =  this.switch.nativeLabel;

ngControl

ngControl: NgControl

placeholderLabel

placeholderLabel: ElementRef<any>

Returns reference to the label placeholder element.

Example

let labelPlaceholder = this.switch.placeholderLabel;

tabindex

tabindex: number = null

Sets/gets the value of the tabindex attribute.

Example

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

value

value: any

Sets/gets the value attribute of the switch component.

Example

<igx-switch [value]="switchValue"></igx-switch>

Accessors

checked

disabled

invalid

nativeElement

required