An Angular library that wraps the awesome AutoNumeric input formatter library
Get in touch on [email protected]
ng-autoNumeric wraps the awesome AutoNumeric library and generate an <input> element managed by AutoNumeric.
Checkout the demo
Note: In order to minimize the size of the ng-autonumeric, the AutoNumeric library dependency is not bundled with it.
This means you need to include the AutoNumeric library.
The only two dependencies are Angular and autoNumeric 4. Here is the list of minimal required versions:
| ng-autonumeric | angular | autoNumeric |
|---|---|---|
| 1.x.x | ^4.0.0 | ^4.0.0 |
After installing the above dependencies, install ng-autonumeric via npm:
npm install --save @angularfy/ng-autonumericor yarn :
yarn add @angularfy/ng-autonumericOnce installed you need to import our main module:
import { NgAutonumericModule } from '@angularfy/ng-autonumeric';
@NgModule({
...
imports: [NgAutonumericModule, ...],
...
})
export class YourAppModule {
}The AutoNumeric component can be instantiated the same way AutoNumeric can.
After importing the NgAutonumericModule, in your component, you can define your options as follow :
this.myOptions = {
digitGroupSeparator: '.',
decimalCharacter: ',',
decimalCharacterAlternative: '.',
currencySymbol: '\u00a0€',
currencySymbolPlacement: 's',
roundingMethod: 'U',
minimumValue: '0'
}in your HTML :
<ng-autonumeric
[(ngModel)]="myValue"
[options]="myOptions">
</ng-autonumeric>or simply with a predefined option name:
<ng-autonumeric
[(ngModdel)]="myValue"
[options]="'French'">
</ng-autonumeric>you can also use object literal as options directly in HTML
<ng-autonumeric
[(ngModdel)]="myValue"
[options]="{
digitGroupSeparator: '.',
decimalCharacter: ',',
decimalCharacterAlternative: '.',
currencySymbol: '\u00a0€',
currencySymbolPlacement: 's',
roundingMethod: 'U',
minimumValue: '0'
}">
</ng-autonumeric>for better integration with input tag, we provide a directive :
<input [ngAutonumeric]="'French'" ngAutonumeric [(ngModel)]="myModel" (change)="onChange($event)" (format)="onFormat($event)" />If you want to keep your ngModel synchronized please use two-way binding otherwise, you can capture the change or format event. (format is more verbose, happens every time the input visually changes, the change event in the other hand, is triggered only when the user types something and leaves the input.)
you can use the component in a reardonly mode :
<ng-autonumeric
[(ngModdel)]="myValue"
[options]="myOptions" [readonly]="true">
</ng-autonumeric>in this case, we use a hidden input to instantiate the component & a span tag to display the value.
we are agnostic about how the input should be styled. you can define your own style rules
ng-autonumeric input{
text-align:right;
}This wrapper supports setting the AutoNumeric options via an options
It also supports external value changes (via myComponent.set(42) for instance) and update the formatting and the [ngModel] accordingly.
The paste, drop and wheel events are supported as well.
Moreover, if you modify the options attribute, the AutoNumeric settings will be automatically updated with the new options.
The official AutoNumeric documentation
- AutoNumeric
^v4 - Angular
^v4
This supports the same browsers than AutoNumeric supports:
- Firefox and
- Chrome
(latest 2 versions) If you use IE/Edge/Safari/Opera, this might work ;)
I will be working on supporting more AutoNumeric events (only autonumeric:formatted is supported for now). If you have any suggestions please feel free to reach by email bellow.
This project is hugely inspired from vue-js implementtation of AutoNumeric by Alexandre Bonneau
As always, if you find this useful, please consider supporting its development! Huge Thanks :)
ng-autonumeric is open-source and released under the [MIT License]
Copyright © 2019 Abdelghani AINOUSS
PS: I would love to know how you're using ng-autonumeric. Contact and tell me!, [email protected] :)