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

[object Object]

Example

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

Constructors

new IgxSwitchComponent(): IgxSwitchComponent

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:237

Returns IgxSwitchComponent

Properties

ariaLabel

Inherited from: CheckboxBaseDirective

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

ariaLabel: string = null

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:235

Example

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

let ariaLabel = this.checkbox.ariaLabel;

ariaLabelledBy

Inherited from: CheckboxBaseDirective

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

ariaLabelledBy: string

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:221

Example

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

let ariaLabelledBy = this.checkbox.ariaLabelledBy;

change

Inherited from: CheckboxBaseDirective

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

change: EventEmitter<IChangeCheckboxEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:36

cssClass

Returns the class of the switch component.

cssClass: string = 'igx-switch'

Defined in projects/igniteui-angular/switch/src/switch/switch.component.ts:58

Example

let switchClass = this.switch.cssClass;

disabled

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

disabled: boolean = false

Defined in projects/igniteui-angular/switch/src/switch/switch.component.ts:87

Example

<igx-switch disabled><igx-switch>

disableRipple

Inherited from: CheckboxBaseDirective

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

disableRipple: boolean = false

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:206

Example

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

let isRippleDisabled = this.checkbox.desableRipple;

focused

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

focused: boolean = false

Defined in projects/igniteui-angular/switch/src/switch/switch.component.ts:115

Example

this.switch.focused = true;

id

Inherited from: CheckboxBaseDirective

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

id: string

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:123

Example

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

let checkboxId =  this.checkbox.id;

indeterminate

Inherited from: CheckboxBaseDirective

indeterminate: boolean

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:70

invalid

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

invalid: boolean = false

Defined in projects/igniteui-angular/switch/src/switch/switch.component.ts:103

Example

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

let isInvalid = this.switch.invalid;

labelId

Inherited from: CheckboxBaseDirective

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

labelId: string

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:137

Example

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

let labelId =  this.component.labelId;

labelPosition

Inherited from: CheckboxBaseDirective

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

labelPosition: string = LabelPosition.AFTER

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:191

Example

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

let labelPosition =  this.checkbox.labelPosition;

name

Inherited from: CheckboxBaseDirective

Sets/gets the name attribute.

name: string

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:163

Example

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

let name =  this.checkbox.name;

nativeInput

Inherited from: CheckboxBaseDirective

Returns reference to the native checkbox element.

nativeInput: ElementRef

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:54

Example

let checkboxElement =  this.component.checkboxElement;

nativeLabel

Inherited from: CheckboxBaseDirective

Returns reference to the native label element.

@example
let labelElement =  this.component.nativeLabel;

nativeLabel: ElementRef

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:65

ngControl

Inherited from: CheckboxBaseDirective

ngControl: NgControl

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:29

placeholderLabel

Inherited from: CheckboxBaseDirective

Returns reference to the label placeholder element.

@example
let labelPlaceholder =  this.component.placeholderLabel;

placeholderLabel: ElementRef

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:107

readonly

Inherited from: CheckboxBaseDirective

readonly: boolean

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:69

tabindex

Inherited from: CheckboxBaseDirective

Sets/gets the value of the tabindex attribute.

tabindex: number = null

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:176

Example

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

let tabIndex =  this.checkbox.tabindex;

value

Inherited from: CheckboxBaseDirective

Sets/gets the value attribute.

value: any

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:150

Example

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

let value =  this.checkbox.value;

Accessors

checked

get checked(): boolean

Defined in projects/igniteui-angular/switch/src/switch/switch.component.ts:73

Returns boolean

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

set checked(value: boolean): void

Defined in projects/igniteui-angular/switch/src/switch/switch.component.ts:70

Example

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

Parameters

value: boolean

Returns void

nativeElement

Inherited from: CheckboxBaseDirective

Returns reference to the nativeElement of the igx-checkbox/igx-switch.

get nativeElement(): any

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:94

Example

let nativeElement = this.component.nativeElement;

Returns any

required

Inherited from: CheckboxBaseDirective

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

get required(): boolean

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:267

Example

<igx-checkbox required></igx-checkbox>

let isRequired = this.checkbox.required;

Returns boolean

set required(value: boolean): void

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:270

Parameters

value: boolean

Returns void