18.0.0 • Published 4 months ago
ngx-currency v18.0.0
ngx-currency
Demo
https://nbfontana.github.io/ngx-currency/
Table of contents
About
Getting Started
Installing and Importing
Install the package by command:
npm install ngx-currency --save
Import the directive
import { NgxCurrencyDirective } from "ngx-currency";
@Component({
standalone: true,
selector: "app-root",
templateUrl: "./app.component.html",
imports: [NgxCurrencyDirective],
})
export class AppComponent {}
Using
<input type="tel" currencyMask formControlName="value" />
ngModel
An 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
- Iftrue
can 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 be0
min
- 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 install
while current directory is this repo
Development server
Run npm start
to start a development server.
Testing
- Run
npm test
to run tests
When running in the Chrome browser, you can set code breakpoints to debug tests using these instructions:
- From the main Karma browser page, click the
Debug
button to open the debug window - Press
ctrl + shift + i
to open Chrome developer tools - Press
ctrl + p
to search for a file to debug - Enter a file name like
input.handler.ts
and 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
18.0.0
4 months ago
17.0.0
9 months ago
4.0.0
1 year ago
3.0.0
2 years ago
2.5.3
3 years ago
2.5.2
4 years ago
2.4.1
4 years ago
2.5.1
4 years ago
2.4.0
4 years ago
2.3.3
4 years ago
2.3.2
4 years ago
2.3.1
4 years ago
2.2.4
4 years ago
2.2.3
4 years ago
2.2.2
5 years ago
2.2.1
5 years ago
2.2.0
5 years ago
2.0.2
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
1.5.2
6 years ago
1.5.1
6 years ago
1.5.0
6 years ago
1.4.0
6 years ago
1.2.0
6 years ago
1.1.2
6 years ago
1.1.1
7 years ago
1.1.0
7 years ago