@anguless/angulux/toggleswitch

toggleswitch

1 declarations3 demos

import

import { ToggleSwitchModule } from '@anguless/angulux/toggleswitch';

Basic

A toggle switch binds to a boolean.

<agl-toggleSwitch [(ngModel)]="checked" />

trueValue and falseValue replace the booleans with values of your own.

<agl-toggleSwitch [(ngModel)]="checked" trueValue="on" falseValue="off" /><span>{{ checked }}</span>

Small and large are available as alternatives to the standard.

<agl-toggleSwitch [(ngModel)]="small" size="small" /><agl-toggleSwitch [(ngModel)]="large" size="large" />

Generated from the committed corpus, which check:corpus holds to the built library.

componentagl-toggleswitch, agl-toggleSwitch, agl-toggle-switch

ToggleSwitch is used to select a boolean value.

Input	Type	Default	Description
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the component.
tabindex	number \| undefined	not documented	Index of the element in tabbing order.
inputId	string \| undefined	not documented	Identifier of the input element.
readonly	boolean \| undefined	not documented	When present, it specifies that the component cannot be edited.
trueValue	any	not documented	Value in checked state.
falseValue	any	not documented	Value in unchecked state.
ariaLabel	string \| undefined	not documented	Used to define a string that autocomplete attribute the current element.
size	'large' \| 'small' \| undefined	undefined	Specifies the size of the component.
ariaLabelledBy	string \| undefined	not documented	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
autofocus	boolean \| undefined	not documented	When present, it specifies that the component should automatically get focus on load.

Output	Type	Description
onChange	EventEmitter<ToggleSwitchChangeEvent>	Callback to invoke when the on value change.

Template slot	Description
<ng-template #handle>	Custom handle template.

inherited

Input	Type	Default	Description
required		false	There must be a value (if set). Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` is required when that control carries `Validators.required` or `Validators.requiredTrue`.
invalid		false	When present, it specifies that the component should have invalid state style. Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` shows the state of that control once it is touched or dirty.
touched	boolean \| undefined	undefined	Whether the user has visited the control. Once this or `dirty` is set, the invalid state style waits for interaction: it appears when the control is touched or dirty. Signal Forms' `[formField]` sets both, so an untouched required field is not shown as invalid. Leave both unset and `invalid` alone decides.
dirty	boolean \| undefined	undefined	Whether the user has changed the value. See `touched`.
disabled		false	When present, it specifies that the component should have disabled state style.
name	string \| undefined	undefined	When present, it specifies that the name of the input.

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.