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

Answer 1

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.

Answer 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 "";
  }
 }
}

Answer 3

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' }}

Answer 4

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("");
  }

}

Answer 5

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