https://github.com/danielzotti/ng-input-number-i18n
A simple directive which manages decimal numbers format in input and textarea inside a ngForm
https://github.com/danielzotti/ng-input-number-i18n
angular customizable decimal directive directives form format formatter locale ngform
Last synced: 8 months ago
JSON representation
A simple directive which manages decimal numbers format in input and textarea inside a ngForm
- Host: GitHub
- URL: https://github.com/danielzotti/ng-input-number-i18n
- Owner: danielzotti
- Created: 2020-01-17T09:48:14.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T14:35:06.000Z (over 3 years ago)
- Last Synced: 2025-10-11T02:15:26.258Z (8 months ago)
- Topics: angular, customizable, decimal, directive, directives, form, format, formatter, locale, ngform
- Language: TypeScript
- Homepage: https://danielzotti.github.io/ng-input-number-i18n/
- Size: 2.8 MB
- Stars: 6
- Watchers: 1
- Forks: 3
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @danielzotti/ng-input-number-i18n
A simple directive which manages decimal numbers in `input` and `textarea` inside a `ngForm`.
- It stores the **value as a JavaScript float** but it displays the formatted number based on `locale` (with decimal and thousands separator).
- On **focus**, it shows the **real number with the decimal separator** based on `locale`.
- It formats numbers using a CustomPipe that extends the Angular **DecimalPipe**.
- It **sanitizes number** while typing (and also on paste) based on the locale thousands and decimal separator:
- e.g. locale = `it-IT` accepts only
- numbers: `0-9`
- one minus sign: `-`
- one thousands separator: `.`
- one decimal separator: `,`
- e.g. locale = `en-US` accepts only
- numbers: `0-9`
- one minus sign: `-`
- one thousands separator: `,`
- one decimal separator: `.`
## Try it yourself
- [Live demo](https://danielzotti.github.io/ng-input-number-i18n)
- [npm](https://www.npmjs.com/package/@danielzotti/ng-input-number-i18n)
- [GitHub demo](https://github.com/danielzotti/ng-input-number-i18n)
- Run `npm install`
- Run `npm run start` for a dev server
- Navigate to `http://localhost:4201/`
# How to use it
## Install the package
Run `npm i @danielzotti/ng-input-number-i18n --save`
## Import the module
Import `NgInputNumberI18nModule` from `@danielzotti/ng-input-number-i18n` in `app.module.ts`
Use `forRoot` to configure the `NgInputNumberI18nModule`:
- `production`: `boolean` (default: `true`)
- If `false` on double click event on input, all the values are logged in the console
- `undoOnEsc`: `boolean` (default: `true`)
- If `ESC` key is pressed the changes on input value are canceled
- `pipe`: `CustomPipe` (default: `NgInputNumberI18nPipe` which is a `DecimalPipe` with null check)
- The default format pipe can be overridden by a `CustomPipe`
- `CustomPipe` must `implement` the Angular `DecimalPipe`
```typescript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from "@angular/forms";
import { NgInputNumberI18nModule } from '@danielzotti/ng-input-number-i18n';
import { AppComponent } from "./app.component";
import { CustomFormatPipe } from './custom.pipe';
@NgModule({
declarations: [
AppComponent,
CustomFormatPipe
],
imports: [
BrowserModule,
CommonModule,
FormsModule,
NgInputNumberI18nModule.forRoot({ production: false, undoOnEsc: false, pipe: CustomFormatPipe }),
],
bootstrap: [AppComponent],
providers: [CustomFormatPipe]
})
export class AppModule {}
```
## Use it in `input`
```html
...
...
```
## ...or in `textarea`
```html
...
...
```
### @Input and @Ouput
#### Input
- `ngInputNumberI18n: digitsInfo`
- See [DecimalPipe docs](https://angular.io/api/common/DecimalPipe#parameters) to learn how to handle `digitsInfo`
- `onlyPositive: boolean` (default: `false`)
- only positive number are permitted
- `selectAllOnFocus: boolean` (default: `true`)
- the input value is selected on focus
#### Output
- `ngInputNumberI18nValues: NgInputNumberI18nOutputValues`
- emits an event with various information everytime the values change
```typescript
export interface NgInputNumberI18nOutputValues {
realValue: number; // the javascript value
inputValue: string; // the string visible in the input value (on focus)
formattedValue: string; // the string visible
format: string; // the format (digitsInfo)
}
```
#### Full example
```html
```
## Thanks to
[How to built npm ready component library with Angular](https://codeburst.io/how-to-built-npm-ready-component-library-with-angular-a812a22dc1d5) by Mohan Ram
[Providing Module Configuration Using forRoot() And Ahead-Of-Time Compiling In Angular 7.2.0](https://www.bennadel.com/blog/3565-providing-module-configuration-using-forroot-and-ahead-of-time-compiling-in-angular-7-2-0.htm) by Ben Nadel