CngxNumericInput

DirectivePrimaryv0.1.0WCAG AA

projects/forms/input/numeric-input.directive.ts

Import#

import { CngxNumericInput } from '@cngx/forms/input'

Description#

Locale-aware numeric input directive.

Keeps type="text" (no browser spinners, no scroll-to-change) and uses Intl.NumberFormat for formatting. Shows raw value on focus, formatted value on blur.

Supports Arrow Up/Down (+ Shift) for increment/decrement with min/max clamping.

<input cngxNumericInput #num="cngxNumericInput"
       [min]="0" [max]="100" [step]="0.5" [decimals]="2" />
<span>Value: {{ num.numericValue() }}</span>

<!-- Currency input (always 2 decimals) -->
<input cngxNumericInput [decimals]="2" [min]="0" [locale]="'de-CH'" />

<!-- Integer-only -->
<input cngxNumericInput [decimals]="0" [allowNegative]="false" />

https://cngxjs.github.io/cngx/examples/#/forms/input/numeric/basic-numeric-input https://cngxjs.github.io/cngx/examples/#/forms/input/numeric/locale-formatting https://cngxjs.github.io/cngx/examples/#/forms/input/numeric/min-max-step-decimals

Metadata#

Selector: input[cngxNumericInput]
Export as: cngxNumericInput

Host#

Static attributes: [attr.inputmode]"decimal"
[attr.role]"spinbutton"
[attr.aria-valuemin]min() ?? null
[attr.aria-valuemax]max() ?? null
[attr.aria-valuenow]numericValue()
Bound styles: font-variant-numeric ← "var(--cngx-numeric-input-numeric-variant, tabular-nums)"
Listeners: beforeinput → handleBeforeInput keydown → handleKeyDown focus → handleFocus blur → handleBlur paste → handlePaste

Providers#

CNGX_VALUE_TRANSFORMER: useFactory (dir: CngxNumericInput): CngxValueTransformer => ({ format: (raw: number | null) => dir.toDisplay(raw), parse: (display: string) => dir.fromDisplay(display), }) deps: forwardRef(() => CngxNumericInput)

Relationships

Depends on1

CNGX_VALUE_TRANSFORMERservice

Index#

Inputs#

allowNegative#boolean

input()

Allow negative values.

default true

decimals#number | undefined

input()

Maximum decimal places. Falls back to global config. undefined = unlimited, 0 = integer only.

formatOnBlur#boolean

input()

Whether to format with thousands separator on blur.

default true

locale#string | undefined

input()

Locale for number formatting. Falls back to global config, then LOCALE_ID.

max#number | undefined

input()

Maximum allowed value.

min#number | undefined

input()

Minimum allowed value.

step#number | undefined

input()

Step for increment/decrement via Arrow keys. Falls back to global config.

value#number | null

model()

Primary value channel. null when empty or invalid.

default null, { alias: 'value' }

Outputs#

value#number | null

model()

Primary value channel. null when empty or invalid.

Instance Properties#

numericValue#Signal

Readonly

Read `value` directly. Kept one release for migration.

this.value

Methods#

clear#void

Clear the value.

setValue#void

setValue(value: number | null)

Programmatically set the numeric value.

@paramvaluenumber | null

HostBindings#

Binding	Expression
`[attr.inputmode]`	`"decimal"`
`[attr.role]`	`"spinbutton"`
`[attr.aria-valuemin]`	`min() ?? null`
`[attr.aria-valuemax]`	`max() ?? null`
`[attr.aria-valuenow]`	`numericValue()`
`[style.font-variant-numeric]`	`"var(--cngx-numeric-input-numeric-variant, tabular-nums)"`

HostListeners#

Event	Handler
`(beforeinput)`	`beforeinput()`
`(keydown)`	`keydown()`
`(focus)`	`focus()`
`(blur)`	`blur()`
`(paste)`	`paste()`

CngxNumericInput

Import#

Description#

Related#

Metadata#

Host#

Providers#

Relationships

Depends on1

Index#

Properties

Methods

Inputs

Outputs

Derived State

HostBindings

HostListeners

Inputs#

Outputs#

Instance Properties#

Methods#

HostBindings#

HostListeners#