nbfontana
ngx-currency
Demo
https://nbfontana.github.io/ngx-currency/
Table of contents
Getting Started
Installing and Importing
Install the package by command:
npm install ngx-currency --saveImport the directive
import { NgxCurrencyDirective } from "ngx-currency";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
imports: [NgxCurrencyDirective],
})
export class AppComponent {}Using
<input type="text" inputmode="decimal" currencyMask formControlName="value" />ngModelAn attribute of type number. If is displayed'$ 25.63', the attribute will be'25.63'.
Options
You can set options...
<!-- example for pt-BR money -->
<input [currencyMask]="{ prefix: 'R$ ', thousands: '.', decimal: ',' }" formControlName="value" />Available options:
align- Text alignment in input. (default:right)allowNegative- Iftruecan input negative values. (default:true)decimal- Separator of decimals (default:'.')precision- Number of decimal places (default:2)prefix- Money prefix (default:'$ ')suffix- Money suffix (default:'')thousands- Separator of thousands (default:',')nullable- when true, the value of the clean field will benull, when false the value will be0min- The minimum value (default:undefined)max- The maximum value (default:undefined)inputMode- Determines how to handle numbers as the user types them (default:Financial)
Input Modes:
Financial- Numbers start at the highest precision decimal. Typing a number shifts numbers left. The decimal character is ignored. Most cash registers work this way. For example:- Typing
'12'results in'0.12' - Typing
'1234'results in'12.34' - Typing
'1.234'results in'12.34'
- Typing
Natural- Numbers start to the left of the decimal. Typing a number to the left of the decimal shifts numbers left; typing to the right of the decimal replaces the next number. Most text inputs and spreadsheets work this way. For example:- Typing
'1234'results in'1234' - Typing
'1.234'results in'1.23' - Typing
'12.34'results in'12.34' - Typing
'123.4'results in'123.40'
- Typing
You can also set options globally...
import { provideEnvironmentNgxCurrency, NgxCurrencyInputMode } from 'ngx-currency';
bootstrapApplication(AppComponent, {
providers: [
...
provideEnvironmentNgxCurrency({
align: "right",
allowNegative: true,
allowZero: true,
decimal: ",",
precision: 2,
prefix: "R$ ",
suffix: "",
thousands: ".",
nullable: true,
min: null,
max: null,
inputMode: NgxCurrencyInputMode.Financial,
}),
...
],
}).catch((err) => console.error(err));Development
Prepare your environment
- Install Node.js and NPM
- Install local dev dependencies:
npm installwhile current directory is this repo
Development server
To start a local development server, run:
npm startBuilding
To build the library run:
npm run build:libTesting
To execute unit tests with the Karma test runner, use the following command:
npm testWhen running in the Chrome browser, you can set code breakpoints to debug tests using these instructions:
- From the main Karma browser page, click the
Debugbutton to open the debug window - Press
ctrl + shift + ito open Chrome developer tools - Press
ctrl + pto search for a file to debug - Enter a file name like
input.handler.tsand click the file - Within the file, click on a row number to set a breakpoint
- Refresh the browser window to re-run tests and stop on the breakpoint
License
MIT @ Neri Bez Fontana