Component · v2.7.0

NgbNumericInputComponent

Locale-aware numeric editing. Percent models use fractions: 0.05 displays as 5%.

Import

import { NgbNumericInputComponent } from '@angular-bootstrap/ngbootstrap';

Selector:ngb-numeric-input

Declaration

class NgbNumericInputComponent implements ControlValueAccessor, Validator, OnChanges

Inputs

`inputId`

Native input ID for external label association; generated when omitted.

inputId: string

Default:''

`label`

Visible label associated with the native input.

label: string

Default:''

`ariaLabel`

Accessible name when a visible label is not supplied.

ariaLabel: string

Default:''

`ariaLabelledBy`

Space-separated IDs of accessible naming elements.

ariaLabelledBy: string

Default:''

`ariaDescribedBy`

Space-separated IDs of help or error messages.

ariaDescribedBy: string

Default:''

`locale`

Explicit locale shared by server and browser.

locale: string

Default:'en-US'

`format`

Display decimal numbers, currency amounts or fractional percentage models.

format: 'decimal' | 'currency' | 'percent'

Default:'decimal'

`currency`

ISO currency code used by currency formatting.

currency: string

Default:'USD'

`precision`

Maximum display fraction digits. Committed values round to this scale.

precision: number

Default:2

`min`

Inclusive minimum model value; null removes the bound.

min: number | null

Default:null

`max`

Inclusive maximum model value; null removes the bound.

max: number | null

Default:null

`step`

Increment in model units (0.01 is one percentage point for percent format).

step: number

Default:1

`showButtons`

Display native increment and decrement buttons.

showButtons: boolean

Default:true

`required`

Reject an empty value through Angular forms validation.

required: boolean

Default:false

`readOnly`

Keep focus and selection available while preventing edits.

readOnly: boolean

Default:false

`disabled`

Disable editing and remove the native controls from keyboard navigation.

disabled: boolean

Default:false

`value`

Current model value. Supports value/valueChange binding or Angular forms.

get value(): number | null
set value(value: number | null)

Outputs

`valueChange`

Emits once when a valid draft commits or a step changes the value.

valueChange: EventEmitter<number | null>

Methods

`writeValue`

writeValue(value: number | null): void

`registerOnChange`

registerOnChange(fn: (value: number | null) => void): void

`registerOnTouched`

registerOnTouched(fn: () => void): void

`setDisabledState`

setDisabledState(disabled: boolean): void

`registerOnValidatorChange`

registerOnValidatorChange(fn: () => void): void

`validate`

validate(_control: AbstractControl): ValidationErrors | null

`commit`

Commit a valid draft; invalid text remains visible and leaves the model unchanged.

commit(): boolean

Source: src/inputs/src/numeric-input.component.ts in the installed @angular-bootstrap/ngbootstrap package. Angular compiler metadata and private members are omitted.