ng2-currency-mask

A very simple currency mask directive for Angular that allows using a number attribute with the ngModel. In other words, the model is a number, and not a string with a mask. You should use the version 2.x.x for Angular 2.x.x applications and the version 4.x.x for Angular 4.x.x applications.

Note: This component is ready to AoC (Ahead-of-Time) compilation.

Getting Started

Installing and Importing

Install the package by command:

1    npm install ngx-currency-mask --save

Import the module

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

Using

1    <input currencyMask [(ngModel)]="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 [(ngModel)]="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: ',')

You can also set options globally...

1import { CurrencyMaskModule } from "ngx-currency-mask";
2import { CurrencyMaskConfig, CURRENCY_MASK_CONFIG } from "ngx-currency-mask/src/currency-mask.config";
3
4export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
5    align: "right",
6    allowNegative: true,
7    allowZero: true,
8    decimal: ",",
9    precision: 2,
10    prefix: "R$ ",
11    suffix: "",
12    thousands: "."
13};
14
15@NgModule({
16    imports: [
17        ...
18        CurrencyMaskModule
19    ],
20    declarations: [...],
21    providers: [
22        { provide: CURRENCY_MASK_CONFIG, useValue: CustomCurrencyMaskConfig }
23    ],
24    bootstrap: [AppComponent]
25})
26export class AppModule {}

Questions? Open a Issue!