### File

`src/toggle/toggle.component.ts`

### Description

See demo

     * <ibm-toggle [(ngModel)]="toggleState">Toggle</ibm-toggle>
     *

../../iframe.html?id=toggle--basic

### Extends

`Checkbox`

### Example

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: Toggle, multi: true }`
selector | `ibm-toggle`

template

    <label *ngIf="label" [id]="ariaLabelledby" class="bx--label">
    	<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
    	<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    </label>
    <input
    	class="bx--toggle"
    	type="checkbox"
    	[ngClass]="{
    		'bx--toggle--small': size === 'sm',
    		'bx--skeleton': skeleton
    	}"
    	[id]="id"
    	[value]="value"
    	[name]="name"
    	[required]="required"
    	[checked]="checked"
    	[disabled]="disabled"
    	[attr.aria-labelledby]="ariaLabelledby"
    	[attr.aria-checked]="checked"
    	(change)="onChange($event)"
    	(click)="onClick($event)">
    <label
    	class="bx--toggle__label"
    	[for]="id"
    	[ngClass]="{
    		'bx--skeleton': skeleton
    	}">
    	<span class="bx--toggle__text--left">{{(!skeleton ? getOffText() : null) | async }}</span>
    	<span class="bx--toggle__appearance">
    		<svg *ngIf="size === 'sm'" class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
    			<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>
    		</svg>
    	</span>
    	<span class="bx--toggle__text--right">{{(!skeleton ? getOnText() : null) | async}}</span>
    </label>

### Index

###### Properties

- Protected _offValues
- Protected _onValues
- id
- Static toggleCount
- _checked
- _indeterminate
- Static checkboxCount
- currentCheckboxState
- inputCheckbox
- onTouched
- propagateChange

###### Methods

- emitChangeEvent
- getOffText
- getOnText
- Public isTemplate
- emitChangeEvent
- ngAfterViewInit
- onChange
- onClick
- Public registerOnChange
- Public registerOnTouched
- Public toggle
- transitionCheckboxState
- Public writeValue

###### Inputs

- label
- offText
- onText
- size
- skeleton
- aria-label
- aria-labelledby
- checked
- disabled
- hideLabel
- id
- indeterminate
- inline
- name
- nested
- required
- size
- skeleton
- value

###### Outputs

- change
- change
- indeterminateChange

###### HostBindings

- class.bx--checkbox-wrapper
- class.bx--form-item

###### Accessors

- offText
- onText

### Constructor

`constructor(changeDetectorRef: ChangeDetectorRef, i18n: I18n)`
Defined in src/toggle/toggle.component.ts:154

Creates an instance of Toggle.

Parameters :

Name | Type | Optional
changeDetectorRef | `ChangeDetectorRef` | No
i18n | `I18n` | No

### Inputs

`label` | Text that is set as the label of the toggle. Type : `string | TemplateRef<any>`
Defined in src/toggle/toggle.component.ts:132

`offText` | Text that is set on the left side of the toggle.
Defined in src/toggle/toggle.component.ts:109

`onText` | Text that is set on the right side of the toggle.
Defined in src/toggle/toggle.component.ts:121

`size` | Size of the toggle component. Type : `"sm" | "md"` Default value : `"md"`
Defined in src/toggle/toggle.component.ts:136

`skeleton` | Set to `true` for a loading toggle. Default value : `false`
Defined in src/toggle/toggle.component.ts:140

`aria-label` | Used to set the `aria-label` attribute on the input element. Default value : `""`
Inherited from `Checkbox`
Defined in Checkbox:147

`aria-labelledby` | Used to set the `aria-labelledby` attribute on the input element. Type : `string`
Inherited from `Checkbox`
Defined in Checkbox:152

`checked` | Updating the state of a checkbox to match the state of the parameter passed in. Type : `boolean`
Inherited from `Checkbox`
Defined in Checkbox:188

`disabled` | Set to `true` for a disabled checkbox. Default value : `false`
Inherited from `Checkbox`
Defined in Checkbox:118

`hideLabel` | Set to `true` to hide the checkbox labels. Default value : `false`
Inherited from `Checkbox`
Defined in Checkbox:126

`id` | The unique id for the checkbox component. Default value : ``checkbox-${Checkbox.checkboxCount}``
Inherited from `Checkbox`
Defined in Checkbox:134

`indeterminate` | Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change. Type : `boolean`
Inherited from `Checkbox`
Defined in Checkbox:164

`inline` | Set to `true` for checkbox to be rendered without any classes on the host element. Default value : `false`
Inherited from `Checkbox`
Defined in Checkbox:114

`name` | Sets the name attribute on the `input` element. Type : `string`
Inherited from `Checkbox`
Defined in Checkbox:130

`nested` | Set to `true` for checkbox to be rendered with nested styles. Type : `boolean`
Inherited from `Checkbox`
Defined in Checkbox:110

`required` | Reflects the required attribute of the `input` element. Type : `boolean`
Inherited from `Checkbox`
Defined in Checkbox:138

`size` | Size of the checkbox. Type : `"sm" | "md"` Default value : `"md"`
Inherited from `Checkbox`
Defined in Checkbox:106

`skeleton` | Set to `true` for a loading checkbox. Default value : `false`
Inherited from `Checkbox`
Defined in Checkbox:122

`value` | Sets the value attribute on the `input` element. Type : `string`
Inherited from `Checkbox`
Defined in Checkbox:142

### Outputs

`change` | Emits event notifying other classes when a change in state occurs on a toggle after a click. `$event` Type: `EventEmitter`
Defined in src/toggle/toggle.component.ts:151

`change` | Emits event notifying other classes when a change in state occurs on a checkbox after a click. `$event` Type: `EventEmitter`
Inherited from `Checkbox`
Defined in Checkbox:212

`indeterminateChange` | Emits event notifying other classes when a change in state occurs specifically on an indeterminate checkbox. `$event` Type: `EventEmitter`
Inherited from `Checkbox`
Defined in Checkbox:217

### HostBindings

class.bx--checkbox-wrapper
`class.bx--checkbox-wrapper: ```
Inherited from `Checkbox`
Defined in Checkbox:201

class.bx--form-item
`class.bx--form-item: ```
Inherited from `Checkbox`
Defined in Checkbox:204

### Methods

emitChangeEvent
`emitChangeEvent()`
Defined in src/toggle/toggle.component.ts:174
Creates instance of `ToggleChange` used to propagate the change event. Returns : `void`

getOffText
`getOffText()`
Defined in src/toggle/toggle.component.ts:163
Returns : `Observable<string>`

getOnText
`getOnText()`
Defined in src/toggle/toggle.component.ts:167
Returns : `Observable<string>`

Public isTemplate
`isTemplate(value)`
Defined in src/toggle/toggle.component.ts:183

Parameters :

Name | Optional
value | No

Returns : `boolean`

emitChangeEvent
`emitChangeEvent()`
Inherited from `Checkbox`
Defined in Checkbox:331
Creates instance of `CheckboxChange` used to propagate the change event. Returns : `void`

ngAfterViewInit
`ngAfterViewInit()`
Inherited from `Checkbox`
Defined in Checkbox:344
Updates the checkbox if it is in the indeterminate state. Returns : `void`

onChange
`onChange(event)`
Inherited from `Checkbox`
Defined in Checkbox:279

Executes on the event of a change within `Checkbox` to block propagation.

Parameters :

Name | Optional
event | No

Returns : `void`

onClick
`onClick(event)`
Inherited from `Checkbox`
Defined in Checkbox:288

Handles click events on the `Checkbox` and emits changes to other classes.

Parameters :

Name | Optional
event | No

Returns : `void`

Public registerOnChange
`registerOnChange(fn: any)`
Inherited from `Checkbox`
Defined in Checkbox:262

Sets a method in order to propagate changes back to the form.

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

Public registerOnTouched
`registerOnTouched(fn: any)`
Inherited from `Checkbox`
Defined in Checkbox:270

Registers a callback to be triggered when the control has been touched.

Parameters :

Name | Type | Optional | Description
fn | `any` | No | `Callback to be triggered when the checkbox is touched.`

Returns : `void`

Public toggle
`toggle()`
Inherited from `Checkbox`
Defined in Checkbox:248
Toggle the selected state of the checkbox. Returns : `void`

transitionCheckboxState
`transitionCheckboxState(newState: CheckboxState)`
Inherited from `Checkbox`
Defined in Checkbox:309

Handles changes between checkbox states.

Parameters :

Name | Type | Optional
newState | `CheckboxState` | No

Returns : `void`

Public writeValue
`writeValue(value: any)`
Inherited from `Checkbox`
Defined in Checkbox:253

Parameters :

Name | Type | Optional
value | `any` | No

Returns : `void`

### Properties

Protected _offValues
`_offValues: ```
Default value : `this.i18n.getOverridable("TOGGLE.OFF")`
Defined in src/toggle/toggle.component.ts:153

Protected _onValues
`_onValues: ```
Default value : `this.i18n.getOverridable("TOGGLE.ON")`
Defined in src/toggle/toggle.component.ts:154

id
`id: ```
Default value : `"toggle-" + Toggle.toggleCount`
Defined in src/toggle/toggle.component.ts:145
The unique id allocated to the `Toggle`.

Static toggleCount
`toggleCount: `number``
Type : `number`
Default value : `0`
Defined in src/toggle/toggle.component.ts:103
Variable used for creating unique ids for toggle components.

_checked
`_checked: ```
Default value : `false`
Inherited from `Checkbox`
Defined in Checkbox:222
Set to `true` if the input checkbox is selected (or checked).

_indeterminate
`_indeterminate: ```
Default value : `false`
Inherited from `Checkbox`
Defined in Checkbox:226
Set to `true` if the input checkbox is in state indeterminate.

Static checkboxCount
`checkboxCount: `number``
Type : `number`
Default value : `0`
Inherited from `Checkbox`
Defined in Checkbox:101
Variable used for creating unique ids for checkbox components.

currentCheckboxState
`currentCheckboxState: `CheckboxState``
Type : `CheckboxState`
Default value : `CheckboxState.Init`
Inherited from `Checkbox`
Defined in Checkbox:228

inputCheckbox
`inputCheckbox: `ElementRef``
Type : `ElementRef`
Decorators : `@ViewChild('inputCheckbox')`
Inherited from `Checkbox`
Defined in Checkbox:233
Maintains a reference to the view DOM element of the `Checkbox`.

onTouched
`onTouched: `function``
Type : `function`
Default value : `() => {}`
Inherited from `Checkbox`
Defined in Checkbox:301
Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.

propagateChange
`propagateChange: ```
Default value : `(_: any) => {}`
Inherited from `Checkbox`
Defined in Checkbox:355
Method set in `registerOnChange` to propagate changes back to the form.

### Accessors

offText
get `offText()`
Defined in src/toggle/toggle.component.ts:113
set `offText(value)`
Defined in src/toggle/toggle.component.ts:109

Text that is set on the left side of the toggle.

Parameters :

Name | Optional
value | No

Returns : `void`

onText
get `onText()`
Defined in src/toggle/toggle.component.ts:125
set `onText(value)`
Defined in src/toggle/toggle.component.ts:121

Text that is set on the right side of the toggle.

Parameters :

Name | Optional
value | No

Returns : `void`

    import { Checkbox } from "../checkbox/checkbox.component";
    import {
    	ChangeDetectorRef,
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	TemplateRef
    } from "@angular/core";
    import { NG_VALUE_ACCESSOR } from "@angular/forms";

    import { I18n, Overridable } from "../i18n/i18n.module";
    import { Observable } from "rxjs";

    /**
     * Defines the set of states for a toggle component.
     */
    export enum ToggleState {
    	Init,
    	Indeterminate,
    	Checked,
    	Unchecked
    }

    /**
     * Used to emit changes performed on toggle components.
     */
    export class ToggleChange {
    	/**
    	 * Contains the `Toggle` that has been changed.
    	 */
    	source: Toggle;
    	/**
    	 * The state of the `Toggle` encompassed in the `ToggleChange` class.
    	 */
    	checked: boolean;
    }

    /**
     * [See demo](../../?path=/story/toggle--basic)
     *
     * ```html
     * <ibm-toggle [(ngModel)]="toggleState">Toggle</ibm-toggle>
     * ```
     *
     * <example-url>../../iframe.html?id=toggle--basic</example-url>
     *
     * @export
     * @class Toggle
     * @extends {Checkbox}
     */
    @Component({
    	selector: "ibm-toggle",
    	template: `
    		<label *ngIf="label" [id]="ariaLabelledby" class="bx--label">
    			<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
    			<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    		</label>
    		<input
    			class="bx--toggle"
    			type="checkbox"
    			[ngClass]="{
    				'bx--toggle--small': size === 'sm',
    				'bx--skeleton': skeleton
    			}"
    			[id]="id"
    			[value]="value"
    			[name]="name"
    			[required]="required"
    			[checked]="checked"
    			[disabled]="disabled"
    			[attr.aria-labelledby]="ariaLabelledby"
    			[attr.aria-checked]="checked"
    			(change)="onChange($event)"
    			(click)="onClick($event)">
    		<label
    			class="bx--toggle__label"
    			[for]="id"
    			[ngClass]="{
    				'bx--skeleton': skeleton
    			}">
    			<span class="bx--toggle__text--left">{{(!skeleton ? getOffText() : null) | async }}</span>
    			<span class="bx--toggle__appearance">
    				<svg *ngIf="size === 'sm'" class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
    					<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>
    				</svg>
    			</span>
    			<span class="bx--toggle__text--right">{{(!skeleton ? getOnText() : null) | async}}</span>
    		</label>
    	`,
    	providers: [
    		{
    			provide: NG_VALUE_ACCESSOR,
    			useExisting: Toggle,
    			multi: true
    		}
    	]
    })
    export class Toggle extends Checkbox {
    	/**
    	 * Variable used for creating unique ids for toggle components.
    	 */
    	static toggleCount = 0;

    	/**
    	 * Text that is set on the left side of the toggle.
    	 */
    	@Input()
    	set offText(value: string | Observable<string>) {
    		this._offValues.override(value);
    	}

    	get offText() {
    		return this._offValues.value;
    	}

    	/**
    	 * Text that is set on the right side of the toggle.
    	 */
    	@Input()
    	set onText(value: string | Observable<string>) {
    		this._onValues.override(value);
    	}

    	get onText() {
    		return this._onValues.value;
    	}
    	/**
    	 * Text that is set as the label of the toggle.
    	 * @type {(string)}
    	 */
    	@Input() label: string | TemplateRef<any>;
    	/**
    	 * Size of the toggle component.
    	 */
    	@Input() size: "sm" | "md" = "md";
    	/**
    	 * Set to `true` for a loading toggle.
    	 */
    	@Input() skeleton = false;

    	/**
    	 * The unique id allocated to the `Toggle`.
    	 */
    	id = "toggle-" + Toggle.toggleCount;

    	/**
    	 * Emits event notifying other classes when a change in state occurs on a toggle after a
    	 * click.
    	 */
    	@Output() change = new EventEmitter<ToggleChange>();

    	protected _offValues = this.i18n.getOverridable("TOGGLE.OFF");
    	protected _onValues = this.i18n.getOverridable("TOGGLE.ON");
    	/**
    	 * Creates an instance of Toggle.
    	 */
    	constructor(protected changeDetectorRef: ChangeDetectorRef, protected i18n: I18n) {
    		super(changeDetectorRef);
    		Toggle.toggleCount++;
    	}

    	getOffText(): Observable<string> {
    		return this._offValues.subject;
    	}

    	getOnText(): Observable<string> {
    		return this._onValues.subject;
    	}

    	/**
    	 * Creates instance of `ToggleChange` used to propagate the change event.
    	 */
    	emitChangeEvent() {
    		let event = new ToggleChange();
    		event.source = this;
    		event.checked = this.checked;

    		this.propagateChange(this.checked);
    		this.change.emit(event);
    	}

    	public isTemplate(value) {
    		return value instanceof TemplateRef;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""