ng-number-input

Angualr form input that adds group and decimal separators to numbers as you type.

Built on top of HTML text input using ControlValueAccessor to support Angular forms API.

Formatting is mostly done using Intl.NumberFormat.

Demo

Play around with the API on StackBlitz.

Usage Instructions

1. Run the following command in your application's root directory to install the package.

   
   npm i ng-number-input --save
   
   

2. Add NgNumberInputModule to the imports array of your module.

3. Use the below component selector in your templates.

   
   <ng-number-input></ng-number-input>
   
   

API

Inputs

• [mode]

  
  @Input() mode: string= 'default';
  
  

  This component runs in one of three modes, default, lazy or string.

  default:

  • As the name suggests, this is the default mode. In this mode the numbers are automatically formatted while the user is typing.

  • The values are stored as number and can only lie between negative Number.MAX_SAFE_INTEGER and Number.MAX_SAFE_INTEGER.

  string:

  • In this mode, the numbers are automatically formatted while the user is typing.

  • The values are stored as string and there is no limit on the number it can hold.

  • The formatting is done using regex in this mode. So [locale] input is not supported. The default formatting is done like 'en-US'.

  lazy:

  • In this mode, plain number is displayed while the user is interacting with the input, and formatted number is displayed once the user stops interacting.

  • The values are stored as number and can only lie between -Number.MAX_SAFE_INTEGER and Number.MAX_SAFE_INTEGER.

• [locale]

  
  @Input() locale = ['en-US', {maximumFractionDigits:3}];
  
  

  With this input you can specify the locale used to format the number.

  It is an array of size 2 and its 0th element is a string and the 1st element is an options object.

  Example:

  ['en-US',{maximumFractionDigits:2}]
  

  Refer to the documentation on Intl.NumberFormat for more details.

  This input is ignored in string mode.

  Note: All locales and locale options are not supported in all modes. Please try out the demo with your preferred locale options. More locales and locale options will be supported in future and you are welcome to contribute.

• [limitTo]

  
  @Input() limitTo: number = 3;
  
  

  Limit the maximum number of values after the decimal point(radix). You can specify a value between 1 - 3

  This input overrides maximumFractionDigits in locale options.

• [max]

  
  @Input() max: number;
  
  

  maximum value the input can hold. It is capped at Number.MAX_SAFE_INTEGER.

• [min]

  
  @Input() min:number;
  
  

  minimum value the input can hold. It is capped at -Number.MAX_SAFE_INTEGER.

• [format]

  
  @Input() format;
  
  

  Use this function to append custom text to brfore or after the formatted number. The below example demonstrates how to pass a custom function that adds $ sign to the formatted number.

  Note: Do not use digits, fraction separators and group separators while formatting.

   example:
  
     
  
   ```
  
   format(text:string): string{
  
   return '$' + text
  
   }
  
   <ng-number-input
  
   [limitTo]="2"
  
   [(ngModel)]="test"
  
   [format]="format"
  
   required>
  
   </ng-number-input>
  
   ```
  

• [name]

  
  @Input() name: string;
  
  

  Name attribute for the underlying input element.

• [placeholder]

  
  @Input() placeholder: string = '';
  
  

  Placeholder attribute for the underlying input element.

• [customStyle]

  
  @Input() customStyle: any = { height: '100%', width: '100%', border: 'none', outline: 'none', padding: '0px' };
  
  

  Add styles to the underlying html input element by passing as a json.

  Example:

  
  {
  
  height: '69px',
  
  width: '100%',
  
  maxWidth: '671px',
  
  margin: '0px auto',
  
  fontSize: '18px',
  
  left: '0px',
  
  padding: '0px 20px'
  
  }
  
  

• [parseInt]

  
  @Input() parseInt:boolean = false;
  
  

  It is a boolean type input. If set to true, decimals will be restricted.

Source Code

You can clone the source code from this GitHub repository.

This library was generated with Angular CLI version 12.1.0.