📦 Currency mask module for Angular
https://nbfontana.github.io/ngx-currency/
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 {}
ngModelAn attribute of type number. If is displayed
'$ 25.63', the attribute will be
'25.63'.
You can set options...
Available options:
align- Text alignment in input. (default:
right)
allowNegative- If
truecan 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:
'12'results in
'0.12'
'1234'results in
'12.34'
'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:
'1234'results in
'1234'
'1.234'results in
'1.23'
'12.34'results in
'12.34'
'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 {}
Input not working on mobile keyboard
Input focus get hide by the mobile keyboard
on HTML
html
on .ts ```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
npm install
while current directory is this repoRun npm start
or npm run demo
to start a development server on port 8000 with auto reload + tests.
npm test
to run tests oncenpm run test:watch
to continually run tests in headless modenpm run test:watch-browser
to continually run tests in the Chrome browserWhen running in the Chrome browser, you can set code breakpoints to debug tests using these instructions:
Debug
button to open the debug windowctrl + shift + i
to open Chrome developer toolsctrl + p
to search for a file to debuginput.handler.ts
and click the fileMIT @ Neri Bez Fontana