ngx-decimal
This is a number format library for Angular.
Input field directive
The ngx-decimal
directive can be used to allow entry of a number in any locale. The type should be text
instead of number
, since number
doesn't support other locales.
Display Components
The components will update the displayed value when either the value or the locale changes.
Display Pipes
The pipes will update the display when the value changes, but will not update the display when the locale is changed.
{{ myNumber | ngxDecimal }}{{ myPercent | ngxDecimalPercent }}{{ myCurrency | ngxDecimalCurrency:currencyCode }}
Service
Inject the service into any class in the constructor.
constructorprivate decimalService: NgxDecimalService
Locale
By default, the locale of the user's browser will be used to format the numbers. The locale can also be set manually.
Set locale
this.decimalService.setLocale'de-DE';
Clear locale
Reset the locale to use the user's browser again.
this.decimalService.clearLocale;
Format numbers
this.decimalService.formatNumber123456; // 1.234,56this.decimalService.formatPercent056; // 56%
Format currency
A currency code is required to format as a currency. If no currency symbol is needed, formatNumber
should be used instead.
this.decimalService.formatCurrency123456, 'USD'; // $1.234,56
Parse Number
Parses a string to obtain a number. The string is expected to be in the set locale.
this.decimalService.parseNumber'1.234,56'; // 1234.56
Number Validity
Check if a string is a valid number in the set locale. Can be used for form validation.
this.decimalService.isNumberValid'1.234,56'; // truethis.decimalService.isNumberValid'1234,56'; // truethis.decimalService.isNumberValid'1,234,56'; // false
Form Validator
There is a built in validator for reactive forms.
;