question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Currency Pipe - not showing currency symbol £ for locale en-GB

See original GitHub issue

I’m submitting a…


[ x] Bug report  ?

Current behavior

The currency pipe is not displaying the correct currency symbol for locale en-GB (united Kingdom) which should be £ (GBP) Instead it is displaying $ (USD)

01/03/2018, 11:34
$2,000.10

The date pipe is however picking up the correct date locale information ??

Expected behavior

The currency pipe should show £ (GBP)

01/03/2018, 11:34
£2,000.10

Minimal reproduction of the problem with instructions

Create new angular-cli project My app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { LOCALE_ID, NgModule } from '@angular/core';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [{ provide: LOCALE_ID, useValue: 'en-GB' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

My app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
      <div>
      {{today | date:'short'}}
    </div>
    <div>
      {{amount | currency}}
    </div>
  `
})
export class AppComponent {
  today: Date = new Date();
  amount = 2000.10;
}

This displays

01/03/2018, 11:34
$2,000.10

but it should display

01/03/2018, 11:34
£2,000.10

I am using ng serve --locale en-GB

as described here https://angular.io/guide/i18n#i18n-pipes

Help. What am I doing wrong 😃

Environment


Angular-cli version: 1.6.8
Angular version: 5.2.0

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:12 (3 by maintainers)

github_iconTop GitHub Comments

9reactions
wmgdevcommented, Mar 1, 2018

If I set my locale to en-GB my expectation is that ‘amount: number = 10.00’ when piped through Currency Pipe would appear £10.00

In the duplicate issue it is stated… The locale will only change the formatting for the currency pipe, it will not change the currency itself…The locale will never change the currency code that you use because it makes no sense, $10 is the same value in all locales, you will just write it differently ($10 in english, 10 $ in spanish)

Is that not a bit US-centric. I agree 10 is 10 in all locales but 10 is not $10 in all locales It assumes that all numbers are based on and default to currency code $ regardless of locale. Should my locale also not set my default currency code?

As it is, if I am writing an app in United Kingdom, I have to use {{amount | currency:‘GBP’}} every time I display a number as currency instead of just {{amount | currency}} even tho I have set my locale.

8reactions
ocombecommented, Mar 5, 2018

You need to set the currency that you want to display, and that’s the expected behavior. It’s to avoid the money to be showed in the wrong currency, because $10 !== 10£, it doesn’t have the same value. Otherwise people could forget to set the currency and get wrong values. It’s better to be explicit in this case.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 9 currency pipe not showing euro symbol
But the euro sign is never shown. If I change the currency to USD or GBP the $ or £ symbols are shown....
Read more >
Angular Currency Pipe & Format Currency In Angular with ...
Angular Currency Pipe takes currency value as input and currencyCode,display,digitsInfo and locale as parameters as shown below
Read more >
currency-formatter - npm
A simple Javascript utility that helps you to display currency properly. Latest version: 1.5.9, last published: a year ago.
Read more >
CurrencyPipe - Angular
Transforms a number to a currency string, formatted according to locale ... If the locale has no narrow symbol, uses the standard symbol...
Read more >
Locale L10N | Transloco Angular i18n - GitHub Pages
Currency Pipe ​. Transform a given number into the locale's currency format. The library comes out of the box with locale currency mapping,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found