NgIndigit

A very versatile Angular Digit Input Directive with customizable digit grouping, decimal separators, etc.

Usage

In the terminal, type

npm i ng-indigit

Now import the module in your angular module, e.g. app.module.ts:

import { NgIndigitModule } from 'ng-indigit';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgIndigitModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

In your template file, add the ng-indigit attribute to an HTML text input, e.g.:

<input type="text" ng-indigit formControlName="value"/>

Configuration

You can pass the following attributes values of supported types for further customizations:

Attribute	Supported Type	Default	Description
digitGroups (since v0.3.11)	boolean[**] Partial<IDigitGroupParam> Partial<IPrettyFloatDigitGroupOption>	if unset false if set true (or any truthy value), the following applies to decimal and integer parts of the number { groupSize: 3, delimiter: ' ' // (white space) } // you can override each property	Set digit grouping parameters for integer and decimal[*] parts of the number at once. You can set the groups' delimiter character and/or the group size for the decimal/integer part together/distinctively.
integerDigitGroups decimalDigitGroups[*]	boolean[**] Partial<IDigitGroupParam>	if unset false if set true { groupSize: 3, delimiter: ' ' // (white space) } // you can override each property	Set digit grouping parameters for integer and decimal[*] parts of a number. You can set the groups' delimiter character and/or the group size.
decimal[*]	boolean[**] Partial<IPrettyFloatDecimalParam>	if unset false if set true { floatPoint: '.', // dot minDigitCount: 0, maxDigitCount: -1 } // you can override each property	Set parameters for decimal numbers[*]. You can set the decimal separator (float point character), and/or minimum / maximum number of decimal digits.
allowNegative	boolean[**]	false	Toggle support for negative numbers.

Default Values as Provider (since v0.3.11)

You may also pass an object of TPrettyFloatOption type as the NG_INDIGIT_PRETTY_FLOAT_CONFIG provider to the module that imports NgIndigitModule;

e.g.:

import { NgIndigitModule, NG_INDIGIT_PRETTY_FLOAT_CONFIG } from 'ng-indigit';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgIndigitModule
  ],
  providers: [
    {
      provide: NG_INDIGIT_PRETTY_FLOAT_CONFIG,
      useValue: {
        digitGroups: { delimiter: ',', groupSize: 3, hasDigitGroups: true },
        decimal: { maxDigitCount: 4, minDigitCount: 0, isDecimalAllowed: true }
      }
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Example/Demo

1. Clone the GitHub repo:

git clone git@github.com:vahidm90/ng-indigit.git

2. Install the dependencies/package contents:

cd ng-indigit
npm install

3. Build the directive:

ng build

4. Run the demo app

ng serve

5. Navigate to http://localhost:4200 on your browser to see a running demo.

Contribution

Any pull request is welcome!

Here's a list of ideas to begin with:

• Automated tests, versioning, changelogs; or better said a perfect CI/CD pipelining
• Full support for decimal numbers
• Full support for negative numbers
• Compatibility tests & implementation for older/newer versions of Angular
• Documentation

Credits

Many thanks to Javad Rasouli for the idea to develop this in the first place, and to Hossein Salmanian for valuable tips and feedbacks.

License

NgIndigit is free and licensed under the MIT License.

________________________________

* Support for decimal numbers is experimental.

** For boolean properties, adding only the attribute name or passing any truthy value is identical with passing true as the property's value.