Building AngularJS Web Applications for an International Audience
Currency filter
The currency filter can format a number as currencies. By default it will use a
currency symbol from the current locale. For example, the {{100 | currency}}
expression will yield different results depending on the configured locale:
- $100.00 in en-us (English locale in United States)
- 100.00 € in fr-fr (French locale in France)
The default behavior of the currency filter might be confusing for the users of your
web application, as usually we want to display numbers as a price in a specific
currency. It would be rather bizarre, if we could reduce a price of an item from
100.00 € (euros) to 100.00 $ just be changing locale settings.
Unless you are using just one, fixed locale we recommend to always specify a
currency symbol when using the currency filter:
{{100 | currency:'€'}}There is a further complication though, while the currency filter allows us to specify
a currency symbol, it won't let us specify a position of this symbol or a decimal
separator (and will use defaults from the current locale). This means that the
previous example would render as € 100.00, something that is unusual for the Euro
currency symbol.
If the currency filter does the job for your use cases that's great; by all means use
it. But there are times where it falls short, and we should be prepared to roll out a
custom filter.
Number filter
The number filter behaves as expected, and will format numbers by applying both
thousand and decimal separators according to local settings. For example:
{{1000.5 | number}}It will render as:
- 1,000.5 in en-us (English locale in United States)
- 1000,5 € in fr-fr (French locale in France)
Handling translations
Being able to format dates and numbers according to local settings is only small part
of the whole localization story. Usually when people think about localization it is the
translation effort that comes to the mind first.