@ng-dl/numeric-input

override browser's default behavior & localization on numeric inputs

Usage no npm install needed!

<script type="module">
  import ngDlNumericInput from 'https://cdn.skypack.dev/@ng-dl/numeric-input';
</script>

README

Numeric Input Directive

Sync browsers' behavior and localization on numeric inputs.

Demo

StackBlitz

Edit numeric-input-demo

Installation

Install with NPM:

npm version

npm i @ng-dl/numeric-input

Usage

import { NumericInputModule } from '@ng-dl/numeric-input';

@NgModule({
  ...,
  imports: [..., NumericInputModule]
})
export class AppModule { }

Override default browser locale with any supported locale.

import { NumericInputModule, NUMERIC_INPUT_LOCALE } from '@ng-dl/numeric-input';

@NgModule({
  ...,
  imports: [..., NumericInputModule],
  providers: [..., 
               { 
                provide: NUMERIC_INPUT_LOCALE, 
                useValue: 'my-locale' | ['array-of-locales']
               }
             ]
})
export class AppModule { }

NOTICE:

NUMERIC_INPUT_LOCALE accepts an array of locales to support multiple decimal separators - to enable comma and a dot, for example, we can provide ['nl-nl', 'en-us'].

For formatting the first locale will be used.

Apply the directive:

<input dlNumericInput/>

Properties:

Name Description Example
@Input() min: number The minumum valid value 1
@Input() max: number The maximum valid value 100
@Output() localized: EventEmitter<string> Localized number as a string '١٢٣٫٤٥'

Contributing

Pull requests are welcome. Suggestions are welcome.

For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT