ngx-delimit-number v0.0.1

ngx-delimit-number

Because I'm tired of copying this stuff between projects. https://www.npmjs.com/package/ngx-delimit-number

About

This lightweight Directive formats numerical input as it is typed. Just add ngxDelimitNumber to any text box and your users will see e.g. 1,000 while your underlying model stores 1000 (numeric type).

It supports different delimiters for localization (see Localization).

Getting Started

1. Install via npm or yarn

npm i -S ngx-delimit-number
//------------- OR --------------
yarn add ngx-delimit-number

2. Import NgxDelimitNumberModule in your application

import { NgxDelimitNumberModule } from 'ngx-delimit-number';
@NgModule({
  ...
  imports: [... NgxDelimitNumberModule],
  ...
})
export class AppModule { }

Usage

Add ngxDelimitNumber on your inputs:

<input type="text" ngxDelimitNumber [(ngModel)]="aNumber" />

Note that while a user interacts with the delimited number, your underlying model will store the parsed number (null if invalid).

ngxDelimitNumber also lets you specify what the thousand (group) and decimal separators should be: ngxDelimitNumber="<group><decimal>" (exactly 2 characters). E.g.

<input type="text" ngxDelimitNumber=".," [(ngModel)]="aNumber" />

Localization

Set locale property to format for a specific locale:

<input type="text" ngxDelimitNumber locale="fr-FR" [(ngModel)]="aNumber" />

Set localize property to detect and automatically format based on a user's locale preferences:

<input type="text" ngxDelimitNumber [localize]="true" [(ngModel)]="aNumber" />

You can use these properties together to handle fallback in case locale cannot be automatically detected properly.

If you pass false to ngxDelimitNumber, all formatting will be disabled, so you can conditionally enable this Directive on input elements. Note that it will not convert the input value in any way, i.e. the underlying model will be of string type.

<input type="text" [ngxDelimitNumber]="false" [(ngModel)]="aNumberOrString" />

ngxDelimitNumber also handles changes to format as best it can. For example:

<input type="text" [ngxDelimitNumber]="someCondition ? ',.' : '.,'" [(ngModel)]="aNumber" />

If someCondition changes, the input will be re-formatted as expected.

Note that conditionally disabling and enabling input formatting can lead to undefined situations, so it's not advisable to do that (it's impossible to parse a string into number in JavaScript without explicit knowledge of what delimiters were used, so 1,000 or 1.000 as string could both mean 1 or 1000 as number in JavaScript).

Local Development

If you wish to contribute to this repository, below are the steps for local development.

1. Clone the repository git clone https://github.com/cf91/ngx-delimit-number.git
2. Run npm install to install the dependencies
3. Run npm build to build both the library and demo app and create a link
4. Run npm start to build and watch the demo app (opens the app at http://localhost:4200/ automatically)
5. Run npm watch:lib to build and watch the library

Build

Run npm run build to build the library and demo app together. The build artifacts will be stored in the dist/ directory.

This step is used by CircleCI to build both library and demo app. After a succesful build, a new semantic version of library is published to npm.

Tests

Run npm run test:lib or npm run test:app to execute the unit tests via Karma.