@anguless/angulux/selectbutton

selectbutton

1 declarations2 demos

import

import { SelectButtonModule } from '@anguless/angulux/selectbutton';

Basic

SelectButton is a single choice laid out as a row of buttons.

Off

<agl-selectButton [(ngModel)]="value" [options]="options" optionLabel="label" optionValue="value" />

With multiple, the value becomes an array and several options can be on at once.

Bold

Italic

Underline

<agl-selectButton [(ngModel)]="value" [options]="options" [multiple]="true" optionLabel="label" optionValue="value" />

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

componentagl-selectButton, agl-selectbutton, agl-select-button

SelectButton is used to choose single or multiple items from a list using buttons.

Input	Type	Default	Description
options	any[] \| undefined	not documented	An array of selectitems to display as the available options.
optionLabel	string \| undefined	not documented	Name of the label field of an option.
optionValue	string \| undefined	not documented	Name of the value field of an option.
optionDisabled	string \| undefined	not documented	Name of the disabled field of an option.
unselectable		not documented
tabindex	number	not documented	Index of the element in tabbing order.
multiple	boolean \| undefined	not documented	When specified, allows selecting multiple values.
allowEmpty	boolean	not documented	Whether selection can not be cleared.
styleClass	string \| undefined	not documented	Style class 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.
dataKey	string \| undefined	not documented	A property to uniquely identify a value in options.
autofocus	boolean \| undefined	not documented	When present, it specifies that the component should automatically get focus on load.
size	'large' \| 'small' \| undefined	undefined	Specifies the size of the component.
fluid		undefined	Spans 100% width of the container when enabled.

Output	Type	Description
onOptionClick	EventEmitter<SelectButtonOptionClickEvent>	Callback to invoke on input click.
onChange	EventEmitter<SelectButtonChangeEvent>	Callback to invoke on selection change.

Template slot	Description
<ng-template #item>	Custom item 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.