Change locale dynamically Code Playground

From the project root, let’s run the following from the command line. With the localizedDate, we gain in maintainability in the syntaxe and by using a single internationalization library for dates and contents. As others, it has its cost, this approach adds extra computation in the app.

At the time of writing i18next is one of the most popular i18n libraries in the world outside of the Angular ecosystem. If you’re coming to Angular from another UI library or framework, you might already be familiar with i18next. After all, i18next seems to support every library and framework under the sun. Angular support for i18next comes in via the third-party angular-i18next package. The simplest way to localize numbers is to use Angular’s built-in formatting pipes in our component templates.

Now we can run the following command line at the project root to work with an Arabic development version of our app. By default, Angular will assume that we use the United States English locale (en-US) when developing. Each locale we want to translate to goes under the locales key. Note, however, that all of our UI strings are hard-coded in English.

Still, the ICU syntax is intuitive enough that we don’t need a comprehensive understanding of the standard to use it. Now we can build our app for production with ng build –localize to bake our translation into the Arabic version of our app. 🗒 Note » Running ng serve without the –configuration argument will start the dev server with the English version of our app.

// Change this value to experiment on different ways to read the initial value of the locale.

When we do, opening our browser’s dev tools reveals that our alt tags are localized with proper interpolation in our builds. 🗒 Note » Angular builds an entire copy of our app for each locale we support. So switching locales essentially means that when a user wants the Arabic version of our app, we serve them the entire Arabic copy. In our case this means that we redirect them to /ar, which is the subdirectory (and URI) where our Arabic version lives. All we have to do is use the Angular CLI to add the @angular/localize library.

In my article Get Started with your first Angular Library I went through how to create an Angular library. This time I will start adding some useful things to it and the first thing I am going to add to it is a couple of custom pipes. Using providers you can change your default locale in your NgModule. To do this You need to import LOCALE_ID from angular/core and fetch your locale language to pass the same to providers. The service tmhDynamicLocale provides has one method set(newLocale) to
change the locale.

Our arcade cabinet images currently have English-only alt text that can serve to demonstrate. If you have a specific URL per locale and redirect the user when he changes locale, the first approach should work just fine. If you are already using ngx-translate, creating a localizedDate starts to make sense. Same as the previous approach, the static locale can be replaced by value resolved in a service. That way, we can dynamically change the locale without reloading the entire app. Now we can ng build –localize and run our test production server.

And with that, we can serve the best possible experience to match our visitors’ preferred locales. 🔗 Resource » Get all of our starter demo app code from GitHub. For the same reason, the translate pipe from ngx-translate is impure as well. In the transform method, we are using the service syntax of DatePipe. The locale used in the the built-in date pipe can be set through the pipe’s arguments.

Support the development of JSFiddle and get extra features ✌🏻

On the other hand, impure pipes are called on every change detection cycle. This angular module makes it possible to programmatically change the current locale. TypeScript 2.4 added support for dynamic import() expressions, which allow us to asynchronously load and execute ECMAScript modules on demand.

It collects links to all the places you might be looking at while hunting down a tough bug.

The first-party @angular/localize package is a robust i18n solution for our Angular apps. It is missing some features, however, like support for localized numeral systems. 🗒 Note » By default, Angular will mark translated strings using an auto-generated ID in the translation files s. You can set custom IDs for your translation strings if you want, however. When we mark our HTML tags with i18n, the Angular compiler generates code that calls the $localize template tag underneath the hood.

Expecting the Unexpected — Best practices for Error handling in Angular

Of course, the implementation details will depend both on your production server and the needs of your app. Here’s a quick and dirty implementation in Express that we can use for testing our production builds in development. There are two main considerations when configuring a production server for our localized Angular app. Now that we’ve installed and configured the @angular/localize package, let’s run through an example of how we would localize a string of text in our app. This will install the @angular/localize NPM package for us, adding it to our project.json. With the static string value fr-FR, the LOCALE_ID value can not be dynamically changed.

When we run ng extract-i18n, our marked string will be pulled into messages.xlf. Now that we have our i18n infrastructure set up, let’s go deeper into Angular string translation. So with very little code we’ve given our visitors a nice UI to switch locales. The special injection token, LOCALE_ID, is used to retrieve the active locale from Angular. When the English version of our site is loaded LOCALE_ID will be en-CA, for example. We store this value in an activeLocale field, which we bind to the switcher’s value in our template.

Next, let’s copy the API token we’re given and paste it where the CLI command is waiting for it. 🔗 Resource » The CLDR Language Plural Rules document lists plural forms for all languages. Let’s use this syntax to localize the string that indicates how many store outlets provide a given cabinet in azcadea. We need to use this same tag in our translations to let Angular know where we want to inject the runtime value. 🗒 Note » In our actual code on GitHub we’re using a little injected service to provide the cabinet data.

Like any other JavaScript template tag, the function can be called like $localize`Text in source locale`. Let’s use $localize to mark our navbar link strings for translation. People can set their preferred locales in their browsers, and these locales are sent as an Accept-Language HTTP header https://forexhero.info/ to servers along with normal GET requests. We can use the Accept-Language header to resolve the initial locale on the server for our Angular apps. Let’s update our production test Express server to add locale detection and serve a version of our app matching the closest supported locale.

Unfortunately, Angular always seems to use Western Arabic (1, 2, 3) digits regardless of the active locale. While not ideal, this is often adequate, since most people are familiar enough with Western Arabic digits. Even with browser locale detection we often need to provide our visitors a way to manually select their locale of choice. Luckily, we can cook up a little locale switcher without too much effort.

Also remember to process change detection in application by using tick() method in ApplicationRef. The service tmhDynamicLocaleCache is a $cache of all the loaded locales,
where the key is the locale id and the value is the locale object. Calling tmhDynamicLocale.set will return a promise that will be resolved
when the locale is loaded and will resolve to the new locale. Angular will automatically use the active locale when rendering the date. Shoutouts to the following people for making the assets we’ve used in this demo available for free. Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries.

You may have noticed that managing translation files with Angular’s localization library is a bit clunky. We have to copy the source locale for each of our other supported locales, and we have to keep all these files in sync as we make changes within our app. It can be a pain to build our app every time we want to test a change to one of our localizations. One way to alleviate this is to add a development server configuration for each of our locales.

Of course, you’re here for Angular internationalization (i18n), and we’ve got you covered. It’s no surprise that Angular has robust built-in i18n support. However, it did not completely satisfy my scenario working in a hybrid AngularJs/Angular environment. We can copy messages.xlf to messages.ar.xlf to translate our string to Arabic (and again for each of our app’s supported locales). ✋ Heads up » When we run ng serve or npm start our app will run in development mode with our source locale, and our locale switcher won’t work. If we build our app and run the production test server we wrote above, however, the switcher should switch with no hitch.

The approach you may want to choose to translate dates depends on your application and needs. Ahmed Ghoul wrote a super article about Pure vs Impure Pipe in Angular. Pure pipes (like the built-in date pipe) are called only if the pipe’s inputs changed.

We want our app to be available in multiple languages, so we need to internationalize and localize it. The main purpose of this pipe is to avoid passing the current locale as input. Therefore, it has to be an impure pipe to listen to the current locale changes triggered by other components.

Instead of statically setting the LOCALE_ID value, we can provide a service as a value. The date pipe uses the LOCALE_ID to determine the default locale to use. We can change the app locale by LOCALE_ID setting in the AppModule. 🤿 Go deeper » With ngx-translate we can translate strings using directives or in TypeScript, handle plurals using a plugin, and much more.

The fact that the Angular CLI is using Webpack is an implementation detail which can change in the future. If you define it for your application, you have to add it into app.module.ts. After the locale is changed, the event ‘$localeChangeSuccess’ angular dynamic locale will be
triggered. No matter which i18n library you choose to go with, Phrase can take your localization process to the next level. With the Phrase CLI installed, we can run the following from the command line in our Angular project root.

• After the locale is changed, the event ‘$localeChangeSuccess’ will be
  triggered.
• On the other hand, impure pipes are called on every change detection cycle.
• As others, it has its cost, this approach adds extra computation in the app.
• In this case, the ICU expression takes up the entire string, so both are virtually identical.

Read A Deep Dive on Angular I18n with ngx-translate to get all the details. This will make the placeholders easy to spot and use for our translators. At this point, our English source translations are available in our Phrase project.