fix(common): round currencies based on decimal digits in CurrencyPipe (#21783)

By default, we now round currencies based on the number of decimal digits available for that currency instead of using the rouding defined in the number formats. More info about that can be found in http://www.unicode.org/cldr/charts/latest/supplemental/detailed_territory_currency_information.html#format_info Fixes #10189 PR Close #21783

Author: ocombe

packages/common/src/common.ts

@@ -14,7 +14,7 @@
 export * from './location/index';
 export {NgLocaleLocalization, NgLocalization} from './i18n/localization';
 export {registerLocaleData} from './i18n/locale_data';
-export {Plural, NumberFormatStyle, FormStyle, Time, TranslationWidth, FormatWidth, NumberSymbol, WeekDay, getCurrencySymbol, getLocaleDayPeriods, getLocaleDayNames, getLocaleMonthNames, getLocaleId, getLocaleEraNames, getLocaleWeekEndRange, getLocaleFirstDayOfWeek, getLocaleDateFormat, getLocaleDateTimeFormat, getLocaleExtraDayPeriodRules, getLocaleExtraDayPeriods, getLocalePluralCase, getLocaleTimeFormat, getLocaleNumberSymbol, getLocaleNumberFormat, getLocaleCurrencyName, getLocaleCurrencySymbol} from './i18n/locale_data_api';
+export {Plural, NumberFormatStyle, FormStyle, Time, TranslationWidth, FormatWidth, NumberSymbol, WeekDay, getNbOfCurrencyDigits, getCurrencySymbol, getLocaleDayPeriods, getLocaleDayNames, getLocaleMonthNames, getLocaleId, getLocaleEraNames, getLocaleWeekEndRange, getLocaleFirstDayOfWeek, getLocaleDateFormat, getLocaleDateTimeFormat, getLocaleExtraDayPeriodRules, getLocaleExtraDayPeriods, getLocalePluralCase, getLocaleTimeFormat, getLocaleNumberSymbol, getLocaleNumberFormat, getLocaleCurrencyName, getLocaleCurrencySymbol} from './i18n/locale_data_api';
 export {parseCookieValue as ɵparseCookieValue} from './cookie';
 export {CommonModule, DeprecatedI18NPipesModule} from './common_module';
 export {NgClass, NgForOf, NgForOfContext, NgIf, NgIfContext, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index';

packages/common/src/i18n/currencies.ts

@@ -12,106 +12,141 @@
 export type CurrenciesSymbols = [string] | [string | undefined, string];
 
 /** @internal */
-export const CURRENCIES_EN: {[code: string]: CurrenciesSymbols} = {
- 'AOA': [, 'Kz'],
- 'ARS': [, '$'],
- 'AUD': ['A$', '$'],
- 'BAM': [, 'KM'],
- 'BBD': [, '$'],
- 'BDT': [, '৳'],
- 'BMD': [, '$'],
- 'BND': [, '$'],
- 'BOB': [, 'Bs'],
- 'BRL': ['R$'],
- 'BSD': [, '$'],
- 'BWP': [, 'P'],
- 'BYN': [, 'р.'],
- 'BZD': [, '$'],
- 'CAD': ['CA$', '$'],
- 'CLP': [, '$'],
- 'CNY': ['CN¥', '¥'],
- 'COP': [, '$'],
- 'CRC': [, '₡'],
- 'CUC': [, '$'],
- 'CUP': [, '$'],
- 'CZK': [, 'Kč'],
- 'DKK': [, 'kr'],
- 'DOP': [, '$'],
- 'EGP': [, 'E£'],
- 'ESP': [, '₧'],
- 'EUR': ['€'],
- 'FJD': [, '$'],
- 'FKP': [, '£'],
- 'GBP': ['£'],
- 'GEL': [, '₾'],
- 'GIP': [, '£'],
- 'GNF': [, 'FG'],
- 'GTQ': [, 'Q'],
- 'GYD': [, '$'],
- 'HKD': ['HK$', '$'],
- 'HNL': [, 'L'],
- 'HRK': [, 'kn'],
- 'HUF': [, 'Ft'],
- 'IDR': [, 'Rp'],
- 'ILS': ['₪'],
- 'INR': ['₹'],
- 'ISK': [, 'kr'],
- 'JMD': [, '$'],
- 'JPY': ['¥'],
- 'KHR': [, '៛'],
- 'KMF': [, 'CF'],
- 'KPW': [, '₩'],
- 'KRW': ['₩'],
- 'KYD': [, '$'],
- 'KZT': [, '₸'],
- 'LAK': [, '₭'],
- 'LBP': [, 'L£'],
- 'LKR': [, 'Rs'],
- 'LRD': [, '$'],
- 'LTL': [, 'Lt'],
- 'LVL': [, 'Ls'],
- 'MGA': [, 'Ar'],
- 'MMK': [, 'K'],
- 'MNT': [, '₮'],
- 'MUR': [, 'Rs'],
- 'MXN': ['MX$', '$'],
- 'MYR': [, 'RM'],
- 'NAD': [, '$'],
- 'NGN': [, '₦'],
- 'NIO': [, 'C$'],
- 'NOK': [, 'kr'],
- 'NPR': [, 'Rs'],
- 'NZD': ['NZ$', '$'],
- 'PHP': [, '₱'],
- 'PKR': [, 'Rs'],
- 'PLN': [, 'zł'],
- 'PYG': [, '₲'],
- 'RON': [, 'lei'],
- 'RUB': [, '₽'],
- 'RUR': [, 'р.'],
- 'RWF': [, 'RF'],
- 'SBD': [, '$'],
- 'SEK': [, 'kr'],
- 'SGD': [, '$'],
- 'SHP': [, '£'],
- 'SRD': [, '$'],
- 'SSP': [, '£'],
- 'STD': [, 'Db'],
- 'SYP': [, '£'],
- 'THB': [, '฿'],
- 'TOP': [, 'T$'],
- 'TRY': [, '₺'],
- 'TTD': [, '$'],
- 'TWD': ['NT$', '$'],
- 'UAH': [, '₴'],
- 'USD': ['$'],
- 'UYU': [, '$'],
- 'VEF': [, 'Bs'],
- 'VND': ['₫'],
- 'XAF': ['FCFA'],
- 'XCD': ['EC$', '$'],
- 'XOF': ['CFA'],
- 'XPF': ['CFPF'],
- 'ZAR': [, 'R'],
- 'ZMW': [, 'ZK']
-};
+export const CURRENCIES_EN:
+ {[code: string]: CurrenciesSymbols | [string | undefined, string | undefined, number]} = {
+ 'ADP': [, , 0],
+ 'AFN': [, , 0],
+ 'ALL': [, , 0],
+ 'AMD': [, , 0],
+ 'AOA': [, 'Kz'],
+ 'ARS': [, '$'],
+ 'AUD': ['A$', '$'],
+ 'BAM': [, 'KM'],
+ 'BBD': [, '$'],
+ 'BDT': [, '৳'],
+ 'BHD': [, , 3],
+ 'BIF': [, , 0],
+ 'BMD': [, '$'],
+ 'BND': [, '$'],
+ 'BOB': [, 'Bs'],
+ 'BRL': ['R$'],
+ 'BSD': [, '$'],
+ 'BWP': [, 'P'],
+ 'BYN': [, 'р.', 2],
+ 'BYR': [, , 0],
+ 'BZD': [, '$'],
+ 'CAD': ['CA$', '$', 2],
+ 'CHF': [, , 2],
+ 'CLF': [, , 4],
+ 'CLP': [, '$', 0],
+ 'CNY': ['CN¥', '¥'],
+ 'COP': [, '$', 0],
+ 'CRC': [, '₡', 2],
+ 'CUC': [, '$'],
+ 'CUP': [, '$'],
+ 'CZK': [, 'Kč', 2],
+ 'DJF': [, , 0],
+ 'DKK': [, 'kr', 2],
+ 'DOP': [, '$'],
+ 'EGP': [, 'E£'],
+ 'ESP': [, '₧', 0],
+ 'EUR': ['€'],
+ 'FJD': [, '$'],
+ 'FKP': [, '£'],
+ 'GBP': ['£'],
+ 'GEL': [, '₾'],
+ 'GIP': [, '£'],
+ 'GNF': [, 'FG', 0],
+ 'GTQ': [, 'Q'],
+ 'GYD': [, '$', 0],
+ 'HKD': ['HK$', '$'],
+ 'HNL': [, 'L'],
+ 'HRK': [, 'kn'],
+ 'HUF': [, 'Ft', 2],
+ 'IDR': [, 'Rp', 0],
+ 'ILS': ['₪'],
+ 'INR': ['₹'],
+ 'IQD': [, , 0],
+ 'IRR': [, , 0],
+ 'ISK': [, 'kr', 0],
+ 'ITL': [, , 0],
+ 'JMD': [, '$'],
+ 'JOD': [, , 3],
+ 'JPY': ['¥', , 0],
+ 'KHR': [, '៛'],
+ 'KMF': [, 'CF', 0],
+ 'KPW': [, '₩', 0],
+ 'KRW': ['₩', , 0],
+ 'KWD': [, , 3],
+ 'KYD': [, '$'],
+ 'KZT': [, '₸'],
+ 'LAK': [, '₭', 0],
+ 'LBP': [, 'L£', 0],
+ 'LKR': [, 'Rs'],
+ 'LRD': [, '$'],
+ 'LTL': [, 'Lt'],
+ 'LUF': [, , 0],
+ 'LVL': [, 'Ls'],
+ 'LYD': [, , 3],
+ 'MGA': [, 'Ar', 0],
+ 'MGF': [, , 0],
+ 'MMK': [, 'K', 0],
+ 'MNT': [, '₮', 0],
+ 'MRO': [, , 0],
+ 'MUR': [, 'Rs', 0],
+ 'MXN': ['MX$', '$'],
+ 'MYR': [, 'RM'],
+ 'NAD': [, '$'],
+ 'NGN': [, '₦'],
+ 'NIO': [, 'C$'],
+ 'NOK': [, 'kr', 2],
+ 'NPR': [, 'Rs'],
+ 'NZD': ['NZ$', '$'],
+ 'OMR': [, , 3],
+ 'PHP': [, '₱'],
+ 'PKR': [, 'Rs', 0],
+ 'PLN': [, 'zł'],
+ 'PYG': [, '₲', 0],
+ 'RON': [, 'lei'],
+ 'RSD': [, , 0],
+ 'RUB': [, '₽'],
+ 'RUR': [, 'р.'],
+ 'RWF': [, 'RF', 0],
+ 'SBD': [, '$'],
+ 'SEK': [, 'kr', 2],
+ 'SGD': [, '$'],
+ 'SHP': [, '£'],
+ 'SLL': [, , 0],
+ 'SOS': [, , 0],
+ 'SRD': [, '$'],
+ 'SSP': [, '£'],
+ 'STD': [, 'Db', 0],
+ 'SYP': [, '£', 0],
+ 'THB': [, '฿'],
+ 'TMM': [, , 0],
+ 'TND': [, , 3],
+ 'TOP': [, 'T$'],
+ 'TRL': [, , 0],
+ 'TRY': [, '₺'],
+ 'TTD': [, '$'],
+ 'TWD': ['NT$', '$', 2],
+ 'TZS': [, , 0],
+ 'UAH': [, '₴'],
+ 'UGX': [, , 0],
+ 'USD': ['$'],
+ 'UYI': [, , 0],
+ 'UYU': [, '$'],
+ 'UZS': [, , 0],
+ 'VEF': [, 'Bs'],
+ 'VND': ['₫', , 0],
+ 'VUV': [, , 0],
+ 'XAF': ['FCFA', , 0],
+ 'XCD': ['EC$', '$'],
+ 'XOF': ['CFA', , 0],
+ 'XPF': ['CFPF', , 0],
+ 'YER': [, , 0],
+ 'ZAR': [, 'R'],
+ 'ZMK': [, , 0],
+ 'ZMW': [, 'ZK'],
+ 'ZWD': [, , 0]
+ };

packages/common/src/i18n/format_number.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NumberFormatStyle, NumberSymbol, getLocaleNumberFormat, getLocaleNumberSymbol} from './locale_data_api';
+import {NumberFormatStyle, NumberSymbol, getLocaleNumberFormat, getLocaleNumberSymbol, getNbOfCurrencyDigits} from './locale_data_api';
 
 export const NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/;
 const MAX_DIGITS = 22;
@@ -36,21 +36,18 @@ function strToNumber(value: number | string): number {
  * Transforms a number to a locale string based on a style and a format
  */
 function formatNumber(
- value: number | string, locale: string, style: NumberFormatStyle, groupSymbol: NumberSymbol,
- decimalSymbol: NumberSymbol, digitsInfo?: string): string {
- const format = getLocaleNumberFormat(locale, style);
- const num = strToNumber(value);
-
- const pattern = parseNumberFormat(format, getLocaleNumberSymbol(locale, NumberSymbol.MinusSign));
+ value: number | string, pattern: ParsedNumberFormat, locale: string, groupSymbol: NumberSymbol,
+ decimalSymbol: NumberSymbol, digitsInfo?: string, isPercent = false): string {
  let formattedText = '';
  let isZero = false;
+ const num = strToNumber(value);
 
  if (!isFinite(num)) {
  formattedText = getLocaleNumberSymbol(locale, NumberSymbol.Infinity);
  } else {
  let parsedNumber = parseNumber(num);
 
- if (style === NumberFormatStyle.Percent) {
+ if (isPercent) {
  parsedNumber = toPercent(parsedNumber);
  }
 
@@ -142,13 +139,20 @@ function formatNumber(
 
 /**
  * Formats a currency to a locale string
+ *
+ * @internal
  */
 export function formatCurrency(
  value: number | string, locale: string, currency: string, currencyCode?: string,
  digitsInfo?: string): string {
+ const format = getLocaleNumberFormat(locale, NumberFormatStyle.Currency);
+ const pattern = parseNumberFormat(format, getLocaleNumberSymbol(locale, NumberSymbol.MinusSign));
+
+ pattern.minFrac = getNbOfCurrencyDigits(currencyCode !);
+ pattern.maxFrac = pattern.minFrac;
+
  const res = formatNumber(
- value, locale, NumberFormatStyle.Currency, NumberSymbol.CurrencyGroup,
- NumberSymbol.CurrencyDecimal, digitsInfo);
+ value, pattern, locale, NumberSymbol.CurrencyGroup, NumberSymbol.CurrencyDecimal, digitsInfo);
  return res
  .replace(CURRENCY_CHAR, currency)
  // if we have 2 time the currency character, the second one is ignored
@@ -157,22 +161,27 @@ export function formatCurrency(
 
 /**
  * Formats a percentage to a locale string
+ *
+ * @internal
  */
 export function formatPercent(value: number | string, locale: string, digitsInfo?: string): string {
+ const format = getLocaleNumberFormat(locale, NumberFormatStyle.Percent);
+ const pattern = parseNumberFormat(format, getLocaleNumberSymbol(locale, NumberSymbol.MinusSign));
  const res = formatNumber(
- value, locale, NumberFormatStyle.Percent, NumberSymbol.Group, NumberSymbol.Decimal,
- digitsInfo);
+ value, pattern, locale, NumberSymbol.Group, NumberSymbol.Decimal, digitsInfo, true);
  return res.replace(
  new RegExp(PERCENT_CHAR, 'g'), getLocaleNumberSymbol(locale, NumberSymbol.PercentSign));
 }
 
 /**
  * Formats a number to a locale string
+ *
+ * @internal
  */
 export function formatDecimal(value: number | string, locale: string, digitsInfo?: string): string {
- return formatNumber(
-  value, locale, NumberFormatStyle.Decimal, NumberSymbol.Group, NumberSymbol.Decimal,
-   digitsInfo);
+ const format = getLocaleNumberFormat(locale, NumberFormatStyle.Decimal);
+ const pattern = parseNumberFormat(format, getLocaleNumberSymbol(locale, NumberSymbol.MinusSign));
+ return formatNumber(value, pattern, locale, NumberSymbol.Group, NumberSymbol.Decimal, digitsInfo);
 }
 
 interface ParsedNumberFormat {

packages/common/src/i18n/locale_data.ts

@@ -71,4 +71,4 @@ export const enum ExtraLocaleDataIndex {
 /**
  * Index of each value in currency data (used to describe CURRENCIES_EN in currencies.ts)
  */
-export const enum CurrencyIndex {Symbol = 0, SymbolNarrow}
+export const enum CurrencyIndex {Symbol = 0, SymbolNarrow, NbOfDigits}

packages/common/src/i18n/locale_data_api.ts

@@ -550,3 +550,21 @@ export function getCurrencySymbol(code: string, format: 'wide' | 'narrow', local
 
  return currency[CurrencyIndex.Symbol] || code;
 }
+
+// Most currencies have cents, that's why the default is 2
+const DEFAULT_NB_OF_CURRENCY_DIGITS = 2;
+
+/**
+ * Returns the number of decimal digits for the given currency.
+ * Its value depends upon the presence of cents in that particular currency.
+ *
+ * @experimental i18n support is experimental.
+ */
+export function getNbOfCurrencyDigits(code: string): number {
+ let digits;
+ const currency = CURRENCIES_EN[code];
+ if (currency) {
+ digits = currency[CurrencyIndex.NbOfDigits];
+ }
+ return typeof digits === 'number' ? digits : DEFAULT_NB_OF_CURRENCY_DIGITS;
+}

packages/common/test/i18n/locale_data_api_spec.ts

@@ -13,7 +13,7 @@ import localeZh from '@angular/common/locales/zh';
 import localeFrCA from '@angular/common/locales/fr-CA';
 import localeEnAU from '@angular/common/locales/en-AU';
 import {registerLocaleData} from '../../src/i18n/locale_data';
-import {findLocaleData, getCurrencySymbol, getLocaleDateFormat, FormatWidth} from '../../src/i18n/locale_data_api';
+import {findLocaleData, getCurrencySymbol, getLocaleDateFormat, FormatWidth, getNbOfCurrencyDigits} from '../../src/i18n/locale_data_api';
 
 {
  describe('locale data api', () => {
@@ -74,6 +74,15 @@ import {findLocaleData, getCurrencySymbol, getLocaleDateFormat, FormatWidth} fro
  });
  });
 
+ describe('getNbOfCurrencyDigits', () => {
+ it('should return the correct value', () => {
+ expect(getNbOfCurrencyDigits('USD')).toEqual(2);
+ expect(getNbOfCurrencyDigits('IDR')).toEqual(0);
+ expect(getNbOfCurrencyDigits('BHD')).toEqual(3);
+ expect(getNbOfCurrencyDigits('unexisting_ISO_code')).toEqual(2);
+ });
+ });
+
  describe('getLastDefinedValue', () => {
  it('should find the last defined date format when format not defined',
  () => { expect(getLocaleDateFormat('zh', FormatWidth.Long)).toEqual('y年M月d日'); });