Input Number
NewA numeric field with optional step buttons and native keyboard editing.
Overview
Use the buttons or Up and Down arrows to change the quantity. The limits are 0 and 10.
No change event yet.
HTMLValue and events
<av-input-number inputId="quantity" label="Quantity"
[(ngModel)]="quantity" [min]="0" [max]="10"
showButtons (onChange)="changed($event)" />Decimals and reactive forms
Step by 0.25. Prefixes and suffixes are visual units; the form value stays numeric.
$
HTMLDecimal step
<av-input-number inputId="amount" label="Amount"
[formControl]="amount" [step]="0.25" [min]="0"
prefix="$" showButtons />Sizes and states
kg
Enter a valid number.
Usage and API
Import AvInputNumber with FormsModule or ReactiveFormsModule. Bind a number | null value; clearing the field produces null.
Events. onChange emits { value, originalEvent } for user changes. Programmatic writes and resets do not emit it.
Limits. Buttons respect min and max immediately. Typed values are clamped on blur so intermediate numbers can be edited. Add Angular validators when validating values supplied by application code. The step controls increments, not decimal rounding.
Formatting. This version uses a native number input. Prefix and suffix add units; locale-specific grouping and currency formatting are not included.
Theme. Use --av-input-* for the field and --av-input-number-accent, --av-input-number-border and --av-input-number-background for the buttons.