Class IgxSwitchComponent

Ignite UI for Angular Switch - Documentation

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

  • IgxSwitchComponent

Implements

  • ControlValueAccessor
  • EditorProvider

Properties

ariaLabel

ariaLabel: string | null = null

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

<igx-switch aria-label="Label1"></igx-switch>
let ariaLabel =  this.switch.ariaLabel;
memberof

IgxSwitchComponent

ariaLabelledBy

ariaLabelledBy: string = this.labelId

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>
let ariaLabelledBy = this.switch.ariaLabelledBy;
memberof

IgxSwitchComponent

change

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

memberof

IgxSwitchComponent

checked

checked: boolean = false

Sets/gets whether the switch is on or off. Default value is 'false'.

 <igx-switch [checked] = "true"></igx-switch>
let isChecked =  this.switch.checked;
memberof

IgxSwitchComponent

cssClass

cssClass: string = "igx-switch"

Returns the class of the switch component.

let switchClass = this.switch.cssClass;
memberof

IgxSwitchComponent

disableRipple

disableRipple: boolean = false

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

<igx-switch [disableRipple]="true"></igx-switch>
let isRippleDisabled = this.switch.disableRipple;
memberof

IgxSwitchComponent

disabled

disabled: boolean = false

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

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

IgxSwitchComponent

focused

focused: boolean = false

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

this.switch.focused = true;
let isFocused =  this.switch.focused;
memberof

IgxSwitchComponent

id

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

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>
let switchId =  this.switch.id;
memberof

IgxSwitchComponent

labelId

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

Sets/gets the id of the label element in 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>
let labelId =  this.switch.labelId;
memberof

IgxSwitchComponent

labelPosition

labelPosition: SwitchLabelPosition | string = "after"

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>
let labelPosition =  this.switch.labelPosition;
memberof

IgxSwitchComponent

name

name: string

Sets/gets the name attribute of the switch component.

<igx-switch name = "Switch1"></igx-switch>
let name =  this.switch.name;
memberof

IgxSwitchComponent

nativeCheckbox

nativeCheckbox: ElementRef

Returns reference to the native checkbox element.

let checkboxElement =  this.switch.nativeCheckbox;
memberof

IgxSwitchComponent

nativeLabel

nativeLabel: any

Returns reference to the native label element.

let labelElement =  this.switch.nativeLabel;
memberof

IgxSwitchComponent

placeholderLabel

placeholderLabel: any

Returns reference to the label placeholder element.

let labelPlaceholder =  this.switch.placeholderLabel;
memberof

IgxSwitchComponent

required

required: boolean = false

Sets/gets whether switch is required. If not set, required will have value false.

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

IgxSwitchComponent

tabindex

tabindex: number = null

Sets/gets the value of the tabindex attribute.

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

IgxSwitchComponent

value

value: any

Sets/gets the value attribute of the switch component.

<igx-switch [value] = "switchValue"></igx-switch>
let value =  this.switch.value;
memberof

IgxSwitchComponent

Methods

toggle

  • toggle(): void