Removing Comma from number pipe in angular2

Question

I am a beginner in Angular 2.I'm trying to display some data using angular. this is my code part:

  <span>Value :</span> <span>{{myvalue| number : '1.2-2'}}</span>

Above part will display Value as for eg: "124,500.00". Its ok but i need to remove comma and display data as 124500.00 only. Also this is not a currency type.

I tried some thing like this and its not working

   <span>Value :</span> <span>{{myvalue| number: '.2-3''}}</span>

How can i do that?Can i use any custom pipe?

Thanks in advance

Benedikt Schmidt · Answer 1 · 2019-03-14T06:02:26.530

In fact it looks like there's no direct parameter to the DecimalPipe to change or remove the decimal points. It would probably be the best to write your own pipe to remove the decimal points.

You can either write your own pipe that fully replaces the current use of the DecimalPipe (single pipe for everything) or you write a pipe that removes the commas after the DecimalPipe was used (chained pipes). The last option could look something like this (I got the code from this answer, so greetings to Adrien).

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'noComma'
})
export class NoCommaPipe implements PipeTransform {

  transform(val: number): string {
    if (val !== undefined && val !== null) {
      // here we just remove the commas from value
      return val.toString().replace(/,/g, "");
    } else {
      return "";
    }
  }
}

You can chain the pipes afterwards like this.

 <span>Value :</span> <span>{{myvalue| number : '1.2-2' | noComma}}</span>

Just remember to declare your pipe in your module.

This will only work if the input has comma as separator for thousands. Example: US format is 1,000.00 and German format is 1.000,00. @angular/common has a function to get the decimal separator by locale: getLocaleNumberSymbol(). Thousands separator is ',' if decimal is '.' and vice versa. — DerZyklop, Nov 19 '20 at 12:40

score 3 · Answer 2 · answered Oct 06 '22 at 12:54

3

The shortest solution

<span>{{ (myvalue | number : '1.2-2').replaceAll(',', '') }}</span>

answered Oct 06 '22 at 12:54

grek-andrian

101
1
3

2

should be `replace()` instead of `replaceAll()` – Jordi Nov 12 '22 at 09:51

score 2 · Answer 3 · answered Jul 18 '18 at 18:18

2

Changed REPLACE arguments so that all commas get removed (10,000,000 = 10000000), otherwise I ended up with (10,000,000 = 10000,000). Everything else worked well as per Benedikt.

@Pipe({
    name: 'noComma'
})
export class NoCommaPipe implements PipeTransform {

 transform(val: number): string {
  if (val !== undefined && val !== null) {
    // here we just remove the commas from value
    return val.toString().replace(/,/g, "");
  } else {
    return "";
  }
 }
}

answered Jul 18 '18 at 18:18

Gabriel O

99
8

Wow I didn't even notice your answer until someone commented on mine, but you're of course totally right, I updated my answer to fit the needs. Thanks! – Benedikt Schmidt Mar 14 '19 at 06:04

score 0 · Answer 4 · answered Apr 25 '22 at 21:44

First create your pipe with ng g pipe [name-your-pipe] in the terminal and make sure it's included in the pipe exports module.

Then, here's my implementation of the pipe itself...

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'removeComma'
})
export class RemoveCommaPipe implements PipeTransform {
  
  isNotComma(charecter: string): boolean {
    return charecter !== ','
  }

  transform(value: string | null): string {
    return [...value!].filter(this.isNotComma).join("");
  }

}

score 0 · Answer 5 · answered Jul 21 '23 at 11:42

This will work every time

{{ someNumber | number : '1.2-2' | removeCommas}}

Here, I take pipe input as String so there is no number error here.

@Pipe({ name: 'removeCommas' })
export class RemoveCommasPipe implements PipeTransform {
  transform(value: string): string {
    if (typeof value === 'string') {
      return value.replace(/,/g, '');
    }
    return value;
  }
}

score -1 · Answer 6 · answered Jan 28 '22 at 16:17

-1

Adding this in app.module.ts

import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);

And use this in html component for exemple (value =124566) :

{{ value | number: '':'fr-FR' }}

answered Jan 28 '22 at 16:17

Mohammed Akdim

2,223
1
13
21

score -3 · Answer 7 · answered Apr 19 '19 at 12:52

-3

Angular number uses the decimalPipe, this solution works for angular 2 and more

https://angular.io/api/common/DecimalPipe

Since it is using the locale, you have to change the locale to change the way the pipe displays it

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr');

for reference : https://angular.io/guide/i18n#i18n-pipes

answered Apr 19 '19 at 12:52

sancelot

1,905
12
31

This will change all sorts of date, number, and currency-related things for the entire app. I would not recommend this. – Daniel Schaffer Jun 18 '20 at 18:04

score -6 · Answer 8 · edited Mar 18 '21 at 13:50

-6

In order for decimal point to be removed, my approach is:

{{ someNumber | number : '1.0-0' }}

edited Mar 18 '21 at 13:50

Damian

1,084
3
14
26

answered Mar 15 '21 at 11:47

Nasser Haj

1

It seems like this question not about decimal separator, but thousands only – Dried09 Apr 25 '22 at 10:32

Removing Comma from number pipe in angular2

8 Answers8