@anguless/angulux/togglebutton

togglebutton

1 declarations3 demos

import

import { ToggleButtonModule } from '@anguless/angulux/togglebutton';

Basic

A toggle button carries its own labels for each state.

<agl-toggleButton [(ngModel)]="checked" onLabel="Yes" offLabel="No" />

Icons

onIcon and offIcon give each state its own icon.

Unlocked

<agl-toggleButton [(ngModel)]="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" offIcon="pi pi-lock-open" />

Sizes

Small and large are available as alternatives to the standard.

Off

<agl-toggleButton [(ngModel)]="small" onLabel="On" offLabel="Off" size="small" /><agl-toggleButton [(ngModel)]="large" onLabel="On" offLabel="Off" size="large" />

API

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

ToggleButton

componentagl-toggleButton, agl-togglebutton, agl-toggle-button

ToggleButton is used to select a boolean value using a button.

Input	Type	Default	Description
onLabel	string	not documented	Label for the on state.
offLabel	string	not documented	Label for the off state.
onIcon	string \| undefined	not documented	Icon for the on state.
offIcon	string \| undefined	not documented	Icon for the off state.
ariaLabel	string \| undefined	not documented	Defines a string that labels the input for accessibility.
ariaLabelledBy	string \| undefined	not documented	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the element.
inputId	string \| undefined	not documented	Identifier of the focus input to match a label defined for the component.
tabindex	number \| undefined	not documented	Index of the element in tabbing order.
iconPos	'left' \| 'right'	not documented	Position of the icon.
autofocus	boolean \| undefined	not documented	When present, it specifies that the component should automatically get focus on load.
size	'large' \| 'small'	not documented	Defines the size of the component.
allowEmpty	boolean \| undefined	not documented	Whether selection can not be cleared.
fluid		undefined	Spans 100% width of the container when enabled.

Output	Type	Description
onChange	EventEmitter<ToggleButtonChangeEvent>	Callback to invoke on value change.

Template slot	Description
<ng-template #icon>	Custom icon template.
<ng-template #content>	Custom content template.

Inherited from BaseEditableHolder

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 from BaseComponent

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.