Custom Angular Pipes and Dynamic Locale by Michael Karén DailyJS

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.

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.

For changes made to appLocaleService to be reflected in our app, we need to reload the Angular app. Reloading the app may reset the app state and re-trigger HTTP requests. It’s important to point out that using Webpack specific features such as magic comments above are not supported by the Angular tooling team.

At this point, we’ll be asked if we want to upload our locales for the first time. 🔗 Resource » Get the entire code of our fully localized app from GitHub. To complete the translation we of course copy the to messages.ar.xlf, add a with our Arabic translation, and run ng build –localize. Strings in our component code marked with $localize will be pulled by ng extract-i18n into messages.xlf as usual.

document.body.appendChild(styleEditor)

The function returns the locales in the incoming Accept-Language header as an array. Our new matchSupportedLocales() function uses this array, along with our supported locales and our default locale, to make the best match. The Phrase Localization Suite supports all the translation file formats we’ve covered here and many more. With its CLI and Bitbucket, GitHub, and GitLab sync, your i18n can be on autopilot. The fully-featured Phrase web console, with machine learning and smart suggestions, is a joy for translators to use.

This allows us to run our dev server, with hot reloading as usual, while serving a locale-specific version of our app. Let’s add an Arabic version by modifying our angular.json file. I changed the sourceLocale to Canadian English (en-CA) above and added Arabic (ar) as a supported locale. We need to include the path to a translation file for each locale other than the source (more on translation files a bit later). A special i18n section in our project’s angular.json file is reserved for configuring the @angular/localize library. Well-documented and fully featured via first-party plugins, Transloco is definitely worth a look.

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.

But there is also another solution – you can have multiple bundles for each language, which probably will be better approach as app will be faster. But this solution is not applicable for every application and doesn’t answer the question. Similar to numbers, the simplest way to localize a date is to use the date pipe in our component templates. All we need to do is stick $localize in front of our template string, and interpolate cabinet.name as usual.

How do I work with plurals in my translations?

These pipes will use the active locale for formatting by default. Angular pulls the ICU nested expression bit out into its own separate . This is because sometimes the ICU expression is only part of a bigger translation string. In this case, the ICU expression takes up the entire string, so both are virtually identical. Let’s copy both into our Arabic translation file and translate them.

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.

Version

Our translators can add Arabic (ar) as a project language, then use the Phrase web console to get their translation work done. 🤿 Go deeper » Check out of all the formatting options for the date pipe, as well as its function equivalent, formatDate(). The outer string is copied as-is in translation and is only included in https://forexhero.info/ this case to avoid a warning that the Angular build tools will output if we don’t include it. Note that, unlike English, Arabic has six plural forms that need to be added for proper translation. ICU is a bit outside the scope of this guide, but you can read more about it in The Missing Guide to the ICU Message Format.

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.

🗒 Note » You can use an element if you want to mark an inline string for translation without wrapping it in an otherwise superfluous HTML element. We can shorten this a bit by adding it as an NPM script to our package.json. 🔗 Resource » The Angular documentation has listings for Nginx and Apache server configurations for production Angular apps. The internationalization library ngx-translate provides a translate pipe that can be used as follows. We use pipes either in a service or a template (the HTML code).

In the following example, we are using the template syntax of the slice pipe and the uppercase pipe. 🤿 Go deeper » We’ve just scratched the surface of i18next here. Check out Angular L10n with I18next to get more details on setting up and using i18next in your Angular apps. Once translations are ready, we just need to run the following from the command line at the root of our project. From there we can click the Generate Token button, enter the required note, and click Save.

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.

Once translations are ready, they can sync back to your project automatically. You set it and forget it, leaving you to focus on the code you love. At the time of writing no third-party i18n libraries for Angular are anywhere near as popular as ngx-translate. A small library that does things a bit differently from @angular/localize, ngx-translate has a few things on offer. Injecting strings that can change at runtime into translations is quite common, and works seamlessly with $localize.

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 angular dynamic locale 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.

🗒 Note » Depending on your configuration, you might want to adjust each locale’s to control relative links. Angular has a handy baseHref option when configuring a locale that takes care of this. The repetitive syntax makes this approach frustrating in the syntax. And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out. JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.

• From there we can click the Generate Token button, enter the required note, and click Save.
• Of course, you’re here for Angular internationalization (i18n), and we’ve got you covered.
• However, it did not completely satisfy my scenario working in a hybrid AngularJs/Angular environment.
• The special injection token, LOCALE_ID, is used to retrieve the active locale from Angular.
• After all, i18next seems to support every library and framework under the sun.

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.

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.