0

Hi how to add commas without rounding off the decimal points?

example:

const data = 1000.789343;
const data = 1000.786;

output should be

1,000.789343
1,000.786

I tried some solutions:

new DecimalPipe(data, '2.')

But none of it worked. It will keep rounding off the decimal points. Help is much appreciated.

4
  • data.ToLocaleString() if that doesn't work, then you need to specify it as your country doesn't use that format
    – Pavlo
    Aug 10, 2018 at 15:12
  • @T.J.Crowder see updated question.
    – rj.learn
    Aug 10, 2018 at 15:18
  • @rj.learn do you want to use Intl format
    – Amit
    Aug 10, 2018 at 15:20
  • 1
    sorry data.toLocaleString(undefined, {maximumSignificantDigits : 21}) i didn't pay attention to the longer decimals
    – Pavlo
    Aug 10, 2018 at 15:22

3 Answers 3

2

I would rather use custom code for the same.

var test = 24682476824.7868756;
var formatedval  = test.toString().split('.')[0].split(/(?=(?:\d{3})+(?:\.|$))/g).join(",") + '.' + test.toString().split('.')[1];
console.log(formatedval)

Output: 24,682,476,824.786877

6
  • How does this relate to an Angular 4 pipe? Aug 10, 2018 at 15:26
  • @T.J.Crowder We will have to create custom pipe for the same
    – Amit
    Aug 10, 2018 at 15:27
  • That seems to be missing from the answer. Also, probably better to just use the predefined one. Aug 10, 2018 at 15:32
  • Not sure whether angular has predefined pipe for the functionality. In latest release angular has removed all predefined pipes if I am not wrong
    – Amit
    Aug 10, 2018 at 15:34
  • DecimalPipe, as answered by Danish Arora, is listed in the current docs: angular.io/api/common/DecimalPipe Aug 10, 2018 at 15:38
2

Try Usng Decimal pipe of angular like: {{ yourData | number:'.3-3'}} after specifiying values after ".". It will not round off values

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1. minFractionDigits: The minimum number of digits after the decimal point. Default is 0. maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.

Please visit angular documentation "Decimal Pipe"

3
  • I think there's a correct answer hiding in there. You'd just give a really big value (not 3, as in your example) for maxFractionDigits, right? Aug 10, 2018 at 15:27
  • Yes, It was just an example.. you can modify it accordingly Aug 10, 2018 at 15:49
  • Wouldn't it make more sense to provide an example that worked with the OP's sample values? Aug 10, 2018 at 15:59
1

You could create your own pipe

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'keepDecimals'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, keepDecimals: boolean): string {
    const options = keepDecimals ? {maximumSignificantDigits : 21} : {};
    return value.toLocaleString(undefined, options);
  }
}

<p>{{1000.789343 | keepDecimals: true}}</p>
2
  • Why? What's wrong with DecimalPipe (Danish Arora's answer)? Aug 10, 2018 at 15:46
  • I just realized how DecimalPipe works. This could be an alternative, without specifying max-min
    – Pavlo
    Aug 10, 2018 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.