@anguless/angulux/checkbox

checkbox

1 declarations4 demos

import

import { CheckboxModule } from '@anguless/angulux/checkbox';

Basic

A checkbox bound to a boolean needs binary, otherwise it works on a value collected into an array.

I agree

<agl-checkbox [(ngModel)]="checked" [binary]="true" inputId="agree" /><label for="agree">I agree</label>

Group

Several checkboxes bound to the same array collect their values into it.

Hanoi

Da Nang

Ho Chi Minh City

@for (city of cities; track city) {    <agl-checkbox [(ngModel)]="selected" [value]="city" [inputId]="city" name="cities" />    <label [for]="city">{{ city }}</label>}

Indeterminate

The indeterminate state is a third visual state, distinct from checked and unchecked.

<agl-checkbox [(ngModel)]="checked" [indeterminate]="true" [binary]="true" />

Sizes

Checkbox provides small and large sizes as alternatives to the standard.

<agl-checkbox [(ngModel)]="small" size="small" [binary]="true" /><agl-checkbox [(ngModel)]="normal" [binary]="true" /><agl-checkbox [(ngModel)]="large" size="large" [binary]="true" />

API

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

Checkbox

componentagl-checkbox, agl-checkBox, agl-check-box

Checkbox is an extension to standard checkbox element with theming.

Input	Type	Default	Description
hostName	any	not documented
value	any	not documented	Value of the checkbox.
binary	boolean \| undefined	not documented	Allows to select a boolean value instead of multiple values.
ariaLabelledBy	string \| undefined	not documented	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
ariaLabel	string \| undefined	not documented	Used to define a string that labels the input element.
tabindex	number \| undefined	not documented	Index of the element in tabbing order.
inputId	string \| undefined	not documented	Identifier of the focus input to match a label defined for the component.
inputStyle	{ [klass: string]: any } \| null \| undefined	not documented	Inline style of the input element.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the component.
inputClass	string \| undefined	not documented	Style class of the input element.
indeterminate	boolean	not documented	When present, it specifies input state as indeterminate.
formControl	FormControl \| undefined	not documented	Form control value.
checkboxIcon	string \| undefined	not documented	Icon class of the checkbox icon.
readonly	boolean \| undefined	not documented	When present, it specifies that the component cannot be edited.
autofocus	boolean \| undefined	not documented	When present, it specifies that the component should automatically get focus on load.
trueValue	any	not documented	Value in checked state.
falseValue	any	not documented	Value in unchecked state.
variant	'filled' \| 'outlined' \| undefined	undefined	Specifies the input variant of the component.
size	'large' \| 'small' \| undefined	undefined	Specifies the size of the component.

Output	Type	Description
onChange	EventEmitter<CheckboxChangeEvent>	Callback to invoke on value change.
onFocus	EventEmitter<Event>	Callback to invoke when the receives focus.
onBlur	EventEmitter<Event>	Callback to invoke when the loses focus.

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