Add Comma Separated Thousands to Number Inputs in Angular2

Question

In Angular 2 how would I add thousands separator for number input controls, so for example

Value in model 1000

When cursor not in input control display separator (e.g. 1,000)

When editing value (i.e. cursor inside control) in input control, it should remove commas to allow the value to be easily edited

Thanks

Create a pipe: https://angular.io/docs/ts/latest/guide/pipes.html — Mark Rajcok, Feb 09 '16 at 18:43

score 8 · Answer 1 · answered Mar 20 '19 at 06:12

Try this solution, this will solve your problem. Note: Won't work in stack overflow snippet

<input
      type="text"
      name="product_price"
      [(ngModel)]="product_price"
      autocomplete="off"
      (keydown)="numberCheck($event)"
      (keyup)="CommaFormatted($event)"
    />

CommaFormatted(event) {
 // skip for arrow keys
 if(event.which >= 37 && event.which <= 40) return;

 // format number
 if (this.product_price) {
  this.product_price = this.product_price.replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }}

numberCheck (args) {
if (args.key === 'e' || args.key === '+' || args.key === '-') {
  return false;
} else {
  return true;
}}

SnareChops · Accepted Answer · 2016-02-11T22:32:20.387

7

As Mark commented above you want to use a pipe. You can create a Pipe using the following syntax, then simply add the pipe to your component using the pipes property on the component decorator.

@Pipe({name: 'commaSeparatedNumber'})
export class CommaSeparatedNumberPipe implements PipeTransform {
  transform(value:number, args:string[]) : any {
    return // Convert number to comma separated number string
  }
}

@Component({
  ...
  template: `
    <div *ngIf="!editing">{{number | commaSeparatedNumber}}</div>
    <input type="number" [(ngModel)]="number" />
  `,
  pipes: [CommaSeparatedNumberPipe]
})
class MyComponent{
  public editing: boolean;
  public number: number;
  ...
}

UPDATE

In that case I would recommend listening to the focus and blur events on the input

@Component({
  ...
  template: `<input type="text" [(ngModel)]="number" 
              (focus)="removeCommas()" (blur)="addCommas()" />`
})
class MyComponent{
  number: string;

  removeCommas(){
    this.number = this.number.replace(',', '');
  }

  addCommas(){
    this.number = // Convert number to comma separated number string
  }
}

edited Feb 11 '16 at 22:32

answered Feb 09 '16 at 23:42

SnareChops

13,175
9
69
91

1

Sorry, I've updated the question to make it a bit clearer for the required behaviour I'm looking for. Thanks – Chris Small Feb 11 '16 at 22:25
Updated answer, though I still feel that your actual use case is unclear, perhaps you could combine the two for exactly what you are looking for or please post a full and detailed description of exactly what behaviuor you are looking for from start to finish. – SnareChops Feb 11 '16 at 22:33
Thanks the update is exactly what I'm looking for, I just need to make this into a resalable component to use for all numerics inputs. Thanks. – Chris Small Feb 14 '16 at 22:48
Cheers mate for the answer :))))) – Rémy Testa Jun 09 '17 at 10:35
3

I don't believe this will work, as an input type of number doesn't allow you to enter commas. – sfinks_29 Jan 11 '19 at 00:10

score 1 · Answer 3 · answered Dec 19 '17 at 13:31

1

number:0 already doing that you may use '1.2-2' in place of 0. This adds comma as per culture.

answered Dec 19 '17 at 13:31

manish

59
7

7

Add some more details to your answer. – Mathews Sunny Dec 19 '17 at 14:11

score -1 · Answer 4 · answered Feb 03 '22 at 16:31

I made an adjustment in the code of Hardik Shimpi the solution became simpler. Good work!

<input
  type="text"
  name="product_price"
  [(ngModel)]="product_price"
  autocomplete="off"
  (keydown)="numberCheck($event)"
  oninput="this.value=this.value.replace(/\D/g, '').replace(/\B(?=(\d{3})+ 
  (?!\d))/g, ',')"
/>

score -2 · Answer 5 · answered Aug 18 '17 at 06:01

-2

I think that this is a cleaner solution:

Import LOCALE_ID in app.modules.ts

import {ErrorHandler, NgModule, LOCALE_ID} from '@angular/core';

and define in providers like this:

  providers: [
    PouchServiceProvider,
    DbProvider, {
      provide: LOCALE_ID,
      useValue: "nl-NL"
    }
  ]

This will auto control the seperator

answered Aug 18 '17 at 06:01

kabus

899
1
11
20

ok, so could that be locale-specific? I tried both EN and DE an both would not add any delimiters to the number input. `1000` stays `1000` and does not become `1,000`. (also discussed [here](https://github.com/angular/angular.js/issues/10146)) - edit that is angularJS, but probably the same for angular. – phil294 Oct 21 '17 at 15:13
from where should I include DbProvider?? – vishal-mote Dec 06 '17 at 07:33

Add Comma Separated Thousands to Number Inputs in Angular2

5 Answers5

Linked