# 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. It was tested in Angular version 13.

Latest version **13.0.3** (published 2021-12-23) · 0 weekly downloads

## Install

```sh
npm install ng2-currency-mask
pnpm add ng2-currency-mask
yarn add ng2-currency-mask
bun add ng2-currency-mask
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 13.0.3 |
| Published | 2021-12-23 |
| First published | 2016-11-08 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 229.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | cesarrew |

## Links

- npm: https://www.npmjs.com/package/ng2-currency-mask
- npm.io page: https://npm.io/package/ng2-currency-mask

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) >= 2.3.0

## Recent versions

- 13.0.3 (latest) — 2021-12-23
- 13.0.2 — 2021-12-23
- 13.0.1 — 2021-12-23
- 13.0.0 — 2021-12-22
- 12.0.3 — 2021-08-20
- 12.0.2 — 2021-08-20
- 12.0.1 — 2021-08-20
- 12.0.0 — 2021-08-20
- 11.0.0 — 2021-04-05
- 9.0.2 — 2020-03-31
- 9.0.1 — 2020-03-31
- 9.0.0 — 2020-03-31
- 5.3.1 — 2018-03-16
- 5.3.0 — 2018-03-16
- 5.2.0 — 2018-03-10
- … 36 more at https://npm.io/package/ng2-currency-mask/versions

## 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. It was tested in Angular version 13.

## Example App

https://stackblitz.com/edit/angular-ivy-bpn8by

## Getting Started

### Installing and Importing

Install the package by command:

```sh
    npm install ng2-currency-mask --save
```

Import the module

```ts
import { CurrencyMaskModule } from "ng2-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 as follows:

```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 { CurrencyMaskConfig, CurrencyMaskModule, CURRENCY_MASK_CONFIG } from 'ng2-currency-mask';

export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
    align: "right",
    allowNegative: true,
    decimal: ",",
    precision: 2,
    prefix: "R$ ",
    suffix: "",
    thousands: "."
};

@NgModule({
    imports: [
        ...
        CurrencyMaskModule
    ],
    declarations: [...],
    providers: [
        { provide: CURRENCY_MASK_CONFIG, useValue: CustomCurrencyMaskConfig }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}
```

### Validation

This directive also provides built-in validation for minimum and maximum values. If the attributes 'min' and / or 'max' are set, the Angular CSS class 'ng-invalid' will be added to the input to indicate an invalid value.

```html
<input currencyMask [(ngModel)]="value" min="-10.50" max="100.75" />
```

---
_Source: https://npm.io/package/ng2-currency-mask · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._