NgqAutonumeric

A number input as a Angular component based on AutoNumeric jQuery Plugin http://www.decorplanit.com/plugin/

Usage

* npm install ngq-autonumeric --save
* add JQuery and AutoNumeric scripts to .angular-cli.json
``json
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/autonumeric/autoNumeric-min.js"
],
...
`
* Add NgqAutonumericModule to your app module's
`typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import { NgqAutonumericModule } from 'ngq-autonumeric';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
NgqAutonumericModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

Reactive Form Example

* app.component.ts: create FormGroup
`typescript
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
fg: FormGroup;
floatOpts: AutoNumericOptions;
intOpts: AutoNumericOptions;

ngOnInit() {

this.floatOpts = { vMax: 100, vMin: 0, mDec: 2 };
this.intOpts = { vMax: 100, vMin: 0 };

this.fg = new FormGroup({
age: new FormControl(),
percent: new FormControl(),
amount: new FormControl()
});
}
}

`

* app.component.html: add to template
`html




FormGroup: {{ fg.value | json }}

Percent in '3.5-5' format: {{ fg.get('percent').value | number:'3.5-5'}}
``