bug(pipe): currency pipe missing whitespace on negative amount

[DwieDima]

Which @angular/* package(s) are the source of the bug?

common

Is this a regression?

No

Description

When you use currencies, where the symbol is on the left side, there is no whitespace between the symbol and amount, when amount is negative.

Example negative:

Example positive:

Expected when negative:

Please provide a link to a minimal reproduction of the bug

app.module.ts:

import { CurrencyPipe, registerLocaleData } from '@angular/common';
import localeCh from '@angular/common/locales/de-CH';
import localeChExtra from '@angular/common/locales/extra/de-CH';
import { DEFAULT_CURRENCY_CODE, LOCALE_ID, NgModule } from '@angular/core';

registerLocaleData(localeCh, localeChExtra);

@NgModule({
  ...
  providers: [
    { provide: DEFAULT_CURRENCY_CODE, useValue: 'CHF' },
    {
      provide: LOCALE_ID,
      useValue: 'de-CH',
    },
    CurrencyPipe
  ]
})

app.component.html

<!-- CHF-300.00 -->
<div>{{ -300 | currency }}</div

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.2.3
Node: 16.14.2
Package Manager: npm 8.5.0
OS: darwin arm64

Angular: 13.2.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router, service-worker

Anything else?

My current workaround is to override the currencyPipe:

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

@Pipe({
  name: 'currency',
})
export class CurrencyOverridePipe implements PipeTransform {
  public constructor(private currencyPipe: CurrencyPipe) {}

  public transform(
    value: string | number,
    currencyCode?: string,
    display?: string | boolean,
    digitsInfo?: string,
    locale?: string,
  ): string {
    const result = this.currencyPipe.transform(
      value,
      currencyCode,
      display,
      digitsInfo,
      locale,
    );
    // if the value is negative add whitespace between currency and amount
    if (+value < 0) {
      return result.replace(/-(?=[^-]*$)/, ' -');
    }
    return result;
  }
}

[jessicajaniuk]

@DwieDima Could you create a reproduction of this within stackblitz? That would be really helpful for us to debug this.

[DwieDima]

@jessicajaniuk sure here's the link:
https://stackblitz.com/edit/angular-ivy-kgttd3?file=src/app/app.component.html

[JoostK]

Relates to #33803.

[JeanMeche]

For what it's worth, (-1000).toLocaleString('de-CH', {style: 'currency', currency: 'CHF', currencyDisplay:'symbol'}) returns 'CHF-1’000.00' on Chrome, Firefox and Safari.

[JeanMeche]

The latest CLDR (42) has following for de-CH currencies :

"currencySpacing": {
  "beforeCurrency": {
    "currencyMatch": "[[:^S:]&[:^Z:]]",
    "surroundingMatch": "[:digit:]",
    "insertBetween": " "
  },
  "afterCurrency": {
    "currencyMatch": "[[:^S:]&[:^Z:]]",
    "surroundingMatch": "[:digit:]",
    "insertBetween": " "
  }
},
"standard": "¤ #,##0.00;¤-#,##0.00",

So using de standard de-CH currency format : ¤ #,##0.00 & ¤-#,##0.00.

CHF falls in the afterCurrency case. We see that surroundingMatch checks for a digit after, but - ain't a digit.
So I'd say CHF-310.00 is expected !

• More on that here.
• Json data available here (file cldr-numbers-full/main/de-CH)

[JeanMeche]

I'll close this as this is related to the CLDR. And if it is a real bug, it should reported there.

[angular-automatic-lock-bot]

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