### File

`src/toggle/toggle.component.ts`

### Description

See demo

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

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

### Extends

`Checkbox`

### 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:149
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:127

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

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

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

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

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

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

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

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

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

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

`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:150

`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:101

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

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

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

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

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

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

### 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:146

`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:197

`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:202

### HostBindings

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

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

### Methods

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

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

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

Public isTemplate
`isTemplate(value)`
Defined in src/toggle/toggle.component.ts:178
Parameters :
Name | Optional
value | No
Returns : `boolean`

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

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

onChange
`onChange(event)`
Inherited from `Checkbox`
Defined in Checkbox:257
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:264
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:242
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:250
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:230
Toggle the selected state of the checkbox. Returns : `void`

transitionCheckboxState
`transitionCheckboxState(newState: CheckboxState)`
Inherited from `Checkbox`
Defined in Checkbox:281
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:235
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:148

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

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

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

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

_indeterminate
`_indeterminate: ```
Default value : `false`
Inherited from `Checkbox`
Defined in Checkbox:211
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:88
Variable used for creating unique ids for checkbox components.

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

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

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

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

### Accessors

offText
get `offText()`
Defined in src/toggle/toggle.component.ts:109
set `offText(value)`
Defined in src/toggle/toggle.component.ts:105
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:121
set `onText(value)`
Defined in src/toggle/toggle.component.ts:117
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>
     */
    @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.
    	 */
    	@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 ""