{"id":773,"date":"2023-04-12T05:00:00","date_gmt":"2023-04-12T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=773"},"modified":"2023-04-11T15:02:04","modified_gmt":"2023-04-11T22:02:04","slug":"how-to-change-the-locale-of-your-angular-application","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-change-the-locale-of-your-angular-application\/","title":{"rendered":"How to change the locale of your Angular application?"},"content":{"rendered":"\n

A locale is a combination of country and language, such as fr-CA<\/code> for French spoken in Canada or en-US<\/code> for English spoken in the US. Locales matter when you want to create an application that works all around the globe.<\/p>\n\n\n\n

For instance, let’s take the following sentence in American English for the US:<\/p>\n\n\n\n

On 04\/01\/2023, the price of this item was $2,056.23<\/strong><\/em><\/p>\n\n\n\n

The same sentence in French for France would be:<\/p>\n\n\n\n

Le 01\/04\/2023, le prix de cet article \u00e9tait 2 056,23 \u20ac<\/strong><\/em><\/p>\n\n\n\n

As you can see, everything is different. Currency, number format, date format, and of course, language. Knowing all of these differences between locales would be a complex task. Fortunately for us, Angular knows about most locales, and all pipes<\/a> and formatting functions<\/a> use that locale to format dates\/numbers\/currencies correctly.<\/p>\n\n\n\n

To support different locales, we have to import all of them in main.ts<\/code>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Then you can configure your providers to set a default LOCALE_ID<\/a><\/code>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And just like that, the expression {{ 2056.23 | number }}<\/code> would display 2\u202f056,23 <\/strong>instead of 2,056.23<\/strong> (code example here<\/a>). So our pipes will use that default locale from now on.<\/p>\n","protected":false},"excerpt":{"rendered":"

A locale is a combination of country and language, such as fr-CA for French spoken in Canada or en-US for English spoken in the US. Locales matter when you want to create an application that works all around the globe. For instance, let’s take the following sentence in American English for the US: On 04\/01\/2023, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,27],"tags":[],"class_list":["post-773","post","type-post","status-publish","format-standard","hentry","category-angular","category-i18n"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=773"}],"version-history":[{"count":6,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/773\/revisions"}],"predecessor-version":[{"id":798,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/773\/revisions\/798"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}