Awesome Open Source
Awesome Open Source

ngx-currency

Build Status npm version devDependency Status GitHub issues GitHub stars GitHub license

Demo

https://nbfontana.github.io/ngx-currency/

Table of contents

About

Getting Started

Installing and Importing

Install the package by command:

    npm install ngx-currency --save

Import the module

import { NgxCurrencyModule } from "ngx-currency";

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

Using

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

<!-- example for pt-BR money -->
<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...

import { CurrencyMaskInputMode, NgxCurrencyModule } from "ngx-currency";

export const customCurrencyMaskConfig = {
    align: "right",
    allowNegative: true,
    allowZero: true,
    decimal: ",",
    precision: 2,
    prefix: "R$ ",
    suffix: "",
    thousands: ".",
    nullable: true,
    min: null,
    max: null,
    inputMode: CurrencyMaskInputMode.FINANCIAL
};

@NgModule({
    imports: [
        ...
        NgxCurrencyModule.forRoot(customCurrencyMaskConfig)
    ],
    declarations: [...],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule {}

Quick fixes

Ionic 2-3

Input not working on mobile keyboard

<!-- Change the type to 'tel' -->
    <input currencyMask type="tel" formControlName="value" />

Input focus get hide by the mobile keyboard

on HTML

<!-- Change the type to 'tel' -->
    <input currencyMask type="tel" formControlName="value" [id]="'yourInputId' + index" (focus)="scrollTo(index)" />

on .ts

import { Content } from 'ionic-angular';

export class...

    @ViewChild(Content) content: Content;
  
    scrollTo(index) {
        let yOffset = document.getElementById('yourInputId' + index).offsetTop;
        this.content.scrollTo(0, yOffset + 20);
    }

Development

Prepare your environment

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

Development server

Run npm start or npm run demo to start a development server on port 8000 with auto reload + tests.

Testing

  • Run npm test to run tests once
  • Run npm run test:watch to continually run tests in headless mode
  • Run npm run test:watch-browser to continually run tests in the Chrome browser

When running in the Chrome browser, you can set code breakpoints to debug tests using these instructions:

  • From the main Karma browser page, click the Debug button to open the debug window
  • Press ctrl + shift + i to open Chrome developer tools
  • Press ctrl + p to search for a file to debug
  • Enter a file name like input.handler.ts and click the file
  • Within the file, click on a row number to set a breakpoint
  • Refresh the browser window to re-run tests and stop on the breakpoint

License

MIT @ Neri Bez Fontana


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (11,271
angular (1,297
chrome (460
firefox (310
components (289
angular2 (233
money (76
currency (67
mask (47
aot (33
directive (32