@ngodings/ngx-currency

Angular directive mask for currency, support for NgModule or Reactive forms & easy to use

Demo - Angular v15

https://npm.ngodings.com/packages/ngx-currency

Support Me

If you like this package I will be happy that you support me on Buy me a coffee :)
Buy me coffee: https://www.buymeacoffee.com/alidihaw
Indonesia People: https://sociabuzz.com/dihaw

Getting Started

Installing and Importing

Install the package by command:

1 npm install @ngodings/ngx-currency --save

Import the module

1import { NgxCurrencyModule } from "@ngodings/ngx-currency";
2
3@NgModule({
4    imports: [
5        ...
6        NgxCurrencyModule
7    ],
8    declarations: [...],
9    providers: [...]
10})
11export class AppModule {}

Usage

1<input 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...

1<!-- example for pt-BR money -->
2<input currencyMask formControlName="value" [options]="{ prefix: 'R$ ', thousands: '.', decimal: ',' }"/>

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 0
• 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'
• 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'

You can also set options globally...

1import { CurrencyMaskInputMode, NgxCurrencyModule } from "ngx-currency";
2
3export const customCurrencyMaskConfig = {
4    align: "right",
5    allowNegative: true,
6    allowZero: true,
7    decimal: ",",
8    precision: 2,
9    prefix: "R$ ",
10    suffix: "",
11    thousands: ".",
12    nullable: true,
13    min: null,
14    max: null,
15    inputMode: CurrencyMaskInputMode.FINANCIAL
16};
17
18@NgModule({
19    imports: [
20        ...
21        NgxCurrencyModule.forRoot(customCurrencyMaskConfig)
22    ],
23    declarations: [...],
24    providers: [...],
25    bootstrap: [AppComponent]
26})
27export class AppModule {}

Development

Prepare your environment

• Install Node.js and NPM
• Install local dev dependencies: npm install while current directory is this repo

License

MIT @ Ali Abdul Wahid