carbon-components-angular documentation
  1. Components
  2. Toggle

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
Methods
Inputs
Outputs
HostBindings
Accessors

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
getoffText()
Defined in src/toggle/toggle.component.ts:109
setoffText(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
getonText()
Defined in src/toggle/toggle.component.ts:121
setonText(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 ""