ngx-currency-mask

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ngx-currency-mask
4.3.25 years ago5 years agoMinified + gzip package size for ngx-currency-mask in KB

Readme

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: ```sh
npm install ngx-currency-mask --save
``` Import the module ```ts import { CurrencyMaskModule } from "ngx-currency-mask"; @NgModule({
imports: [
...
CurrencyMaskModule
],
declarations: [...],
providers: [...]
}) export class AppModule {} ```

Using

```html
<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... ```html
<!-- example for pt-BR money -->
<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... ```ts import { CurrencyMaskModule } from "ngx-currency-mask"; import { CurrencyMaskConfig, CURRENCYMASKCONFIG } from "ngx-currency-mask/src/currency-mask.config"; export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
align: "right",
allowNegative: true,
allowZero: true,
decimal: ",",
precision: 2,
prefix: "R$ ",
suffix: "",
thousands: "."
}; @NgModule({
imports: [
...
CurrencyMaskModule
],
declarations: [...],
providers: [
{ provide: CURRENCY_MASK_CONFIG, useValue: CustomCurrencyMaskConfig }
],
bootstrap: [AppComponent]
}) export class AppModule {} ```

Questions? Open a Issue!