A very simple currency mask directive that allows using a number attribute with the ngModel.
npm install ngx-currency



https://nbfontana.github.io/ngx-currency/
- Getting Started
- Documentation
- Development
- License
Install the package by command:
``sh`
npm install ngx-currency --save
Import the directive
`ts
import { NgxCurrencyDirective } from "ngx-currency";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
imports: [NgxCurrencyDirective],
})
export class AppComponent {}
`
`html`
- ngModel An attribute of type number. If is displayed '$ 25.63', the attribute will be '25.63'.
You can set options...
`html`
Available options:
- align - Text alignment in input. (default: right)allowNegative
- - If true 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 be null, when false the value will be 0min
- - 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.'12'
The decimal character is ignored. Most cash registers work this way. For example:
- Typing results in '0.12''1234'
- Typing results in '12.34''1.234'
- Typing results in '12.34'Natural
- - Numbers start to the left of the decimal. Typing a number to the left of the decimal shifts'1234'
numbers left; typing to the right of the decimal replaces the next number. Most text inputs
and spreadsheets work this way. For example:
- Typing results in '1234''1.234'
- Typing results in '1.23''12.34'
- Typing results in '12.34''123.4'
- Typing results in '123.40'
You can also set options globally...
`ts
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));
`
- Install Node.js and NPM
- Install local dev dependencies: npm install while current directory is this repo
To start a local development server, run:
`bash`
npm start
To build the library run:
`bash`
npm run build:lib
To execute unit tests with the Karma test runner, use the following command:
`bash`
npm test
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 windowctrl + shift + i
- Press to open Chrome developer toolsctrl + p
- Press to search for a file to debuginput.handler.ts` and click the file
- Enter a file name like
- 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
MIT @ Neri Bez Fontana