nbfontana / Ngx Currency
Licence: mit
📦 Currency mask module for Angular
Stars: ✭ 161
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ngx Currency
Egeo
EGEO is the open-source UI library used to build Stratio's UI. It includes UI Components, Utilities, Services and much more to build user interfaces quickly and with ease. The library is distributed in AoT mode.
Stars: ✭ 69 (-57.14%)
Mutual labels: aot, components, angular2
Scratchaddons
All-in-one browser extension for Scratch.
Stars: ✭ 133 (-17.39%)
Mutual labels: chrome, firefox
Django Prices
Django fields for the prices module
Stars: ✭ 135 (-16.15%)
Mutual labels: currency, money
Surfingkeys Conf
A SurfingKeys configuration which adds 130+ key mappings for 20+ sites & OmniBar search suggestions for 50+ sites
Stars: ✭ 137 (-14.91%)
Mutual labels: chrome, firefox
Passcards
A 1Password-compatible command-line and web-based password manager
Stars: ✭ 134 (-16.77%)
Mutual labels: chrome, firefox
Ionic3 Components
A project full of ionic 3 components and samples - to make life easier :)
Stars: ✭ 1,689 (+949.07%)
Mutual labels: components, angular2
Keepassbrowserimporter
KeePass 2.x plugin which imports credentials from various browsers.
Stars: ✭ 139 (-13.66%)
Mutual labels: chrome, firefox
Extension
Simple browser extension for managing accounts in a browser and allowing the signing of extrinsics using these accounts. Also provides a simple interface for compliant extensions for dapps.
Stars: ✭ 139 (-13.66%)
Mutual labels: chrome, firefox
Easymoney
Library for operating with monetary values in JavaScript and Typescript 💵
Stars: ✭ 145 (-9.94%)
Mutual labels: currency, money
Exchanger
🏢 Currency exchange rates framework for PHP
Stars: ✭ 133 (-17.39%)
Mutual labels: currency, money
Urql Devtools
A tool for monitoring and debugging urql during development
Stars: ✭ 131 (-18.63%)
Mutual labels: chrome, firefox
Xstyle
A user styles manager for Firefox and Chrome
Stars: ✭ 138 (-14.29%)
Mutual labels: chrome, firefox
Pronounce
Never doubt how to pronounce a word. Double-click it and your browser will say it out loud for you!
Stars: ✭ 151 (-6.21%)
Mutual labels: chrome, firefox
Kdeconnect Chrome Extension
A browser extension to send pages and content from your browser to connected KDE Connect devices.
Stars: ✭ 124 (-22.98%)
Mutual labels: chrome, firefox
Blocker Database
A global domain based database for NoScript, uBlock, uMatrix & ScriptSafe
Stars: ✭ 127 (-21.12%)
Mutual labels: chrome, firefox
Synology Download Manager
An open source browser extension for adding/managing download tasks to your Synology DiskStation.
Stars: ✭ 138 (-14.29%)
Mutual labels: chrome, firefox
ngx-currency
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
- Iftrue
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 benull
, when false the value will be0
-
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'
- Typing
-
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'
- Typing
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].