Zamolxis | Numeric Input

Installation

Note: Design to be used inside <mat-form-field> component from Angular Material .

Overview

A directive designed to format numeric input fields to adhere to locale-specific formatting rules, such as digit grouping (thousands separators), decimal mark usage (period or comma), and potentially other region-specific adjustments and to return a number value.

It uses the formatNumber function from the Angular }angular/common package for formatting the displayed value, which is also used by the DecimalPipe. Although the input type needs to be a type text to allow for locale-specific formatting, the emitted value will always be a number. If the value is truncated it will be rounded using the "to-nearest" method. This behaviour can be disabled by setting the disableDecimalRounding input to true.

Usage of the zxNumericInput directive

Example

HTML

1000.2688 is the value passed to the inputs below.

Default usage

Input value: 1000.269

With no decimal rounding

Input value: 1000.2688

With French locale and digits info "1.2-2"

Input value: 1000.27

API Reference

import { ZxNumericInput } from '@zamolxis/numeric-input';

Selector: zxNumericInput

Exported as: zxNumericInput

Properties

@Input('zxNumericInput') digitsInfo: string;

It accepts a string that represents the format of the number. If not provided, it defaults to `1.0-3` (one integer digit, zero to three fractional digits). See Angular documentation for more details about formatting the input value.

@Input() locale: string | undefined

Applies locale-dictated formatting to a number, including rules for digit grouping (e.g., thousands separators), the choice of decimal mark (period or comma), and potentially other region-specific adjustments. If not provided, the value of LOCALE_ID will be used (en-US by default). See Angular documentation for setting the app locale.

@Input({ transform: booleanAttribute }) disableDecimalRounding: boolean

Disables the rounding of the value decimal. If set to true, the input value will not be rounded when the displayed value is truncated. Default is false.

@Output() valueChange: EventEmitter<number | null>

It is possible to configure the digitsInfo, locale and disableDecimalRounding properties at the application (or component) level using the ZX_NUMERIC_INPUT_CONFIG injection token, as shown below.