Package Exports

ngx-decimal

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-decimal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

<input type="text" ngxDecimal [(ngModel)]="numberValue">

Display Components

The components will update the displayed value when either the value or the locale changes.

<ngx-decimal [value]="myNumber"></ngx-decimal>
<ngx-decimal-percent [value]="myPercent"></ngx-decimal-percent>
<ngx-decimal-currency [value]="myCurrency" isoCode="USD"></ngx-decimal-currency>

Display Pipes

The pipes will update the display when the value changes, but will not update the display when the locale is changed.

<div>{{ myNumber | ngxDecimal }}</div>
<div>{{ myPercent | ngxDecimalPercent }}</div>
<div>{{ myCurrency | ngxDecimalCurrency:currencyCode }}</div>

Service

Inject the service into any class in the constructor.

constructor(private 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.formatNumber(1234.56); // 1.234,56
this.decimalService.formatPercent(0.56); // 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.formatCurrency(1234.56, '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'); // true
this.decimalService.isNumberValid('1234,56'); // true
this.decimalService.isNumberValid('1,234,56'); // false

Form Validator

There is a built in validator for reactive forms.

const form = new FormGroup({
    myNumber: new FormControl(1.23, [this.decimalService.validator()])
});