angular-dynamic-locale Libraries The #1 free and open source CDN built to make life easier for developers

???? 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).

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.

More from Michael Karén and Angular In Depth

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 https://forexhero.info/ 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.

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.

put: function(key, value)

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.

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.

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.

if (confirm(“IE is not supported.\n\nLaunch fiddle in read-only mode?”))

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.

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.

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.

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.

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.

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

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.

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.

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.

• ✋ 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.
• Now we can build our app for production with ng build –localize to bake our translation into the Arabic version of our app.
• The locale used in the the built-in date pipe can be set through the pipe’s arguments.
• The Phrase Localization Suite supports all the translation file formats we’ve covered here and many more.
• No matter which i18n library you choose to go with, Phrase can take your localization process to the next level.

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.

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.