13.0.3 • Published 2 years ago

ng2-currency-mask v13.0.3

Weekly downloads
21,313
License
-
Repository
-
Last release
2 years ago

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:

    npm install ng2-currency-mask --save

Import the module

import { CurrencyMaskModule } from "ng2-currency-mask";

@NgModule({
    imports: [
        ...
        CurrencyMaskModule
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}

Using

<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:

<!-- 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...

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.

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

2 years ago

13.0.3

2 years ago

13.0.0

2 years ago

13.0.1

2 years ago

12.0.3

3 years ago

12.0.0

3 years ago

12.0.1

3 years ago

12.0.2

3 years ago

11.0.0

3 years ago

9.0.2

4 years ago

9.0.1

4 years ago

9.0.0

4 years ago

5.3.1

6 years ago

5.3.0

6 years ago

5.2.0

6 years ago

5.1.0

6 years ago

5.0.2

6 years ago

5.0.1

6 years ago

5.0.0

6 years ago

4.4.1

6 years ago

4.4.0

6 years ago

4.3.5

6 years ago

4.3.4

7 years ago

4.3.2

7 years ago

4.3.1

7 years ago

4.3.0

7 years ago

4.2.0

7 years ago

2.2.0

7 years ago

4.1.0

7 years ago

2.1.0

7 years ago

4.0.2

7 years ago

2.0.2

7 years ago

4.0.1

7 years ago

2.0.1

7 years ago

4.0.0

7 years ago

2.0.0

7 years ago

1.5.1

7 years ago

1.5.0

7 years ago

1.4.0

7 years ago

1.3.0

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago