ngx-currency-directive
    TypeScript icon, indicating that this package has built-in type declarations

    2.5.8 • Public • Published

    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)
    • startFromEnd - Start from end of input on focus (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,
        startFromEnd: false,
        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

    Install

    npm i ngx-currency-directive

    DownloadsWeekly Downloads

    26

    Version

    2.5.8

    License

    MIT

    Unpacked Size

    563 kB

    Total Files

    37

    Last publish

    Collaborators

    • lucchetto