Angular 4 Internalization

Question

I'm using Angular 2 localization support for dates and currencies.

The localization setting is done in the main application module level. Within my app module settings if I configure the LOCALE_ID provider magically I have the localization support.

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

Now, if I use the currency pipe on my application as follows:

@Component({
  selector: 'my-app',
  template: '<h1>{{title}}</h1>' +
            '<div>{{convertNumber | currency}}</div>',
})

export class AppComponent {
   title = 'Currency Test';
   convertNumber = '12.30';
}

You can find the working example in this plnkr code.

I got this output USD 12,30.

The currency rate for Netherlands is not USD.

Based on this issue, I have two questions:

• When I configure the LOCALE_ID what is happening exactly? Where's this localization file?
• I don't want to see USD or EUR, I'd like to see the currency sign itself. (e.g. €) In the documentation, the default configuration for currency is the currency sign(€), not the currency text(EUR).

Apparently, the localization file for Angular 2 is wrong.

How can I find this file and edit it?

Thanks.

Answer 1

I've searched through the source code and here are my findings about your issue:

First if you take a look at the currency pipe line 159 Source1

the pipe calls the formatNumber method => Source2

which returns NumberFormatter.format. To this point the locale parameter is always carried (but never actually used)

Finally at NumberFormatter.format source code Source3 it returns a Intl.NumberFormat

Take a look at this method from mdn: https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

The usage of this method with currency options is like this:

var number = 123456.789;

// request a currency format
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// → 123.456,79 €

So let's go back to the source code and see where this currency option is set in the second parameter.

https://github.com/angular/angular/blob/master/packages/common/src/pipes/intl.ts#L34

One can expect Angular to convert the locale parameter to the actual local currency (for example nl to EUR) but instead it is

options.currency = typeof currency == 'string' ? currency : undefined;

So if you don't pass a currency input like this:

'<div>{{convertNumber | currency:"EUR":true}}</div>',

Working plunker: https://plnkr.co/edit/Ln6br8ZKQdCbA8Ejn5Cr?p=preview

Angular will display its default behaviour which is USD Source4