fix(core): Fix decimal pipe floating point formatting bug by injae-kim · Pull Request #53730 · angular/angular

injae-kim · 2023-12-30T14:25:59Z

PR Type

Bugfix

What is the current behavior?

Input (string) : "123456789.123456789"
Format : 0.0-9
Output :   123,456,789.12345679 // 7(8)9 -> 8 is lost..
Expected : 123,456,789.123456789

angular/packages/common/src/pipes/number_pipe.ts

Lines 104 to 105 in d315e2c

 const num = strToNumber(value); 

 return formatNumber(num, locale, digitsInfo);

Currently, decimal_pipe parse string to number first and then apply formating
- ⚠️ When parse '123456789.123456789' string to number, some digit on fraction part is lost due to javascript floating point limitation
Issue Number: Decimal Pipe not formatting value correctly #47809
- Reproduce: https://stackblitz.com/edit/angular-ivy-ycarro?file=src/app/app.component.html

What is the new behavior?

        const formatStrs = [integerPart, fractionPart]
            .map(part => strToNumber(part))
            .map(num => formatNumber(num, locale, digitsInfo));

To format string to number on javascript well, apply formatting on integer/fraction part separately and then concat, return it.

Does this PR introduce a breaking change?

No

google-cla · 2023-12-30T14:26:03Z

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

packages/common/src/pipes/number_pipe.ts

JeanMeche · 2023-12-30T18:13:23Z

packages/common/src/pipes/number_pipe.ts

The condition doesn't cover every non valid string, we should likely rely on strToNumber to throw.

if (typeof value === 'string' && value.includes('.') && strToNumber(value)) { const parts = value.split('.'); const integerPart = parts[0]; const fractionPart = `0.${parts[1]}`; ..

Hmm you mean calling strToNumber(value) inside of if(..)?
Or can you give some example code? 🙇

Cause parts is array of string, we can't pass it to strToNumber(string) directly 🤔

We can either call strToNumber() or probably better, extract the portion we'd like to reuse in a function :

function isStringNumber(value: number|string): boolean { return typeof value === 'string' && !isNaN(Number(value) - parseFloat(value)) }

aha~ I understood. isStringNumber looks much better! thanks for nice suggestion 👍

fix(core): Fix decimal pipe floating point formatting bug Address `JeanMeche`'s comments Extract duplicated codes to isStringNumber()

injae-kim · 2024-01-16T13:43:06Z

I need this feature and ready to update PR, so waiting your awesome reviews~ thanks! 😃

JeanMeche · 2025-03-05T17:46:34Z

Per #47809

After discussing it more recently with the team and given little to not interest shown from the community, we decided to not diverge from the native javascript behavior and keep the Decimal Pipe as is.

angular-automatic-lock-bot · 2025-04-05T00:12:07Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

pullapprove bot requested review from AndrewKushnir and atscott December 30, 2023 14:26

injae-kim force-pushed the 47809-fix-decimal-pipe-floating-point branch 3 times, most recently from 75c4a1c to b978193 Compare December 30, 2023 15:49

injae-kim mentioned this pull request Dec 30, 2023

Decimal Pipe not formatting value correctly #47809

Closed