Sets/gets the value of the aria-label
attribute.
<igx-switch aria-label = "Label1"></igx-switch>
Sets/gets the aria-labelledBy
attribute.
If not set, the value of aria-labelledBy
will be equal to the value of labelId
attribute.
<igx-switch aria-labelledby = "Label1"></igx-switch>
Readonly
changeAn event that is emitted after the switch state is changed.
Provides references to the IgxSwitchComponent
and the checked
property as event arguments.
Returns the class of the switch component.
let switchClass = this.switch.cssClass;
Enables/Disables the ripple effect
If not set, disableRipple
will have value false
.
<igx-switch [disableRipple]="true"></igx-switch>
Sets/gets whether the switch component is on focus.
Default value is false
.
this.switch.focused = true;
Sets/gets the id
of the switch component.
If not set, the id
of the first switch component will be "igx-switch-0"
.
<igx-switch id="my-first-switch"></igx-switch>
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"
.
<igx-switch labelId="Label1"></igx-switch>
Sets/gets the position of the label
in the switch component.
If not set, labelPosition
will have value "after"
.
<igx-switch labelPosition="before"></igx-switch>
Sets/gets the name
attribute of the switch component.
<igx-switch name="Switch1"></igx-switch>
Returns a reference to the native checkbox element.
let checkboxElement = this.switch.nativeCheckbox;
Returns reference to the native label element.
let labelElement = this.switch.nativeLabel;
Returns reference to the label placeholder element.
let labelPlaceholder = this.switch.placeholderLabel;
Sets/gets the value of the tabindex
attribute.
<igx-switch [tabindex]="1"></igx-switch>
Sets/gets the value
attribute of the switch component.
<igx-switch [value]="switchValue"></igx-switch>
Sets/gets whether the switch is on or off. Default value is 'false'.
<igx-switch [checked]="true"></igx-switch>
Sets/gets the disabled
attribute.
Default value is false
.
<igx-switch disabled><igx-switch>
Sets/gets whether the switch component is invalid.
Default value is false
.
<igx-switch invalid></igx-switch>
let isInvalid = this.switch.invalid;
Returns reference to the nativeElement
of the igx-switch.
let nativeElement = this.switch.nativeElement;
Sets/gets whether switch is required.
If not set, required
will have value false
.
<igx-switch required></igx-switch>
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