{"id":36815,"date":"2022-11-08T21:45:34","date_gmt":"2022-11-08T21:45:34","guid":{"rendered":"https:\/\/www.globalizationpartners.com\/?p=36815"},"modified":"2022-11-08T21:46:47","modified_gmt":"2022-11-08T21:46:47","slug":"best-practices-for-angular-internationalization","status":"publish","type":"post","link":"https:\/\/www.globalizationpartners.com\/2022\/11\/08\/best-practices-for-angular-internationalization\/","title":{"rendered":"Best Practices for Angular Internationalization"},"content":{"rendered":"

When building an application, it is not a question of if it might be used by a global audience, but a matter of when it will be offered to global markets. This is why it is important to build an application with internationalization (i18n) in mind.<\/p>\n

Planning to support multiple languages, not only includes the GUI (graphical user interface), but also other aspects like formatting dates and numbers, applying different currencies, and supporting language-specific fonts (including bi-directional). Depending on the framework or content management system (CMS) you are going to use to build your application, you might have different alternatives to internationalize it. In this blog, we will cover the best practices for the internationalization process of an Angular app.<\/p>\n

\u00a0<\/strong><\/h2>\n

Overview<\/strong><\/h2>\n

\"BestTo internationalize your Angular app to support multiple languages; follow these steps:<\/p>\n

1- Install needed dependencies.<\/p>\n

2- Prepare project for translation.<\/p>\n

3- Extract text to be sent to translator<\/a>.<\/p>\n

4 – Use .xlf file after translation and set project to localization.<\/p>\n

Let\u2019s start our journey.<\/p>\n

 <\/p>\n

Install Dependencies<\/strong><\/h2>\n

Install a localized package to a project by using the Angular CLI and (ng add @angular\/localize) command, then we will add the @angular\/localize package, afterward, the package.json file will be updated.<\/p>\n

 <\/p>\n

Prepare Components for Translation<\/strong><\/h2>\n

Prepare the Value of an Element<\/strong><\/h3>\n

To prepare the fixed text in the template, we will use the i18n attribute to mark all static text to be translated;<\/p>\n

We must place the i18n attribute on every<\/em> element tag we want to translate.<\/p>\n

Example:<\/p>\n

<h1 i18n> Welcome in GPI! <\/h1><\/p>\n

We added the i18n attribute in the element to mark the h1 element tag as a translatable element.<\/p>\n

When Angular executes the extract process, it will understand that the h1 tag is to be translated.<\/p>\n

 <\/p>\n

Prepare the Attribute of an Element<\/strong><\/h3>\n

To mark the title attribute for translation, you will add i18n-title.<\/p>\n

Example:<\/p>\n

<img [src]=”logo” i18n-title title=”GPI logo” alt=” GPI logo”\/><\/p>\n

In the previous example we used the following format to mark the \u201ctitle\u201d attribute for translation:<\/p>\n

i18n-{attribute_name}=”{i18n_metadata}” {attribute_name}=”{attribute_value}”<\/p>\n

 <\/p>\n

Preparing Text in Component Code<\/strong><\/h3>\n

As we use a variable in the ts class, we need to also mark this text for translation, to do that we use backtick (`) characters to surround the text and metadata.<\/p>\n

For text only:<\/p>\n

$localize `string_to_translate`;<\/p>\n

To add i18n metadata we will surround it by (:) as shown here:<\/p>\n

$localize `:{i18n_metadata}:string_to_translate`<\/p>\n

When we need to include interpolated text, will use this format:<\/p>\n

$localize `string_to_translate ${variable_name}:placeholder_name:`;<\/p>\n

 <\/p>\n

Preparing Plural Expressions<\/strong><\/h3>\n

The difficulty with plural expressions is that different languages have different pluralization rules. To mark plural expressions, we use the plural clause:<\/p>\n

{ component_property, plural, pluralization_categories },<\/p>\n

Notice that we will put plural in the (pluralization_categories) part:<\/p>\n

Example : =0 { } zero { }<\/p>\n

Notice this example:<\/p>\n

( updated x minutes ago )<\/p>\n

<span i18n>Updated X minutes ago <\/span><\/p>\n

We can mark it as:<\/p>\n

<span i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other<\/p>\n

{{{minutes}} minutes ago}}<\/span><\/p>\n

For more detailed information about the pluralization category, check out\u00a0 Angular<\/a> Documentation.<\/p>\n

 <\/p>\n

Preparing Alternate Expressions<\/strong><\/h3>\n

We can use the (select) clause to mark choices for alternate text:<\/p>\n

Format: { component_property, select, selection_categories }<\/p>\n

We enter the text (English) surrounded by the curly brace ({}) characters after the selection category:<\/p>\n

<span i18n>The main course is {main_course, select, meat { meat } fish { fish } other {other}}<\/span><\/p>\n

 <\/p>\n

Export Content for Translation<\/strong><\/h3>\n

Now that we have finished preparing the components, we will extract all marked text by using Angular CLI.<\/p>\n

By using \u201dextract-i18n<\/a>\u201d command, Angular will create a source language file named \u201cmessages.xlf\u00a0\u201d\u00a0and it will be created in the root directory.<\/p>\n

To create the file in specific directory we can use: \u201cng extract-i18n –output-path src\/locale\u201d<\/p>\n

Then, create a copy of the file for each language; we rename each language file depending on the locale needed following this format:<\/p>\n

file_name.{locale}.xlf\u00a0 like\u00a0\u00a0 messages.fr.xlf<\/p>\n

it is preferred to create a directory for translation files like: src\/locale inside .xlf file, we will find the <trans-unit> tag for every marked text. Inside this tag there is tag <source>, this tag contains marked source text.<\/p>\n

The translator can use the xlf editor App or manually by adding a new tag named <target> and write the value inside.<\/p>\n

Simple example:<\/p>\n

<trans-unit id=”introduction” datatype=”html”><\/p>\n

<source>Hello<\/source><\/p>\n

<target>Bonjour<\/target<\/p>\n

<\/trans-unit><\/p>\n

 <\/p>\n

Import Translated Content<\/strong><\/h3>\n

Now we need to prepare the app for localization by adding specific properties in angulal.json file.<\/p>\n

As in next snippet code, we will add the new property \u201ci18n\u201d and we will specify the source locale that is the locale used in source code.<\/p>\n

We will add other property \u201clocales\u201d and the specific locales that the App can support.<\/p>\n

Once we finish, we need to merge the translations into our application.<\/p>\n

Go to the angular.json file and add new settings<\/p>\n

“i18n”: {<\/p>\n

“sourceLocale”: “en-US”,<\/p>\n

“locales”: {<\/p>\n

“fr-CA”:”src\/locale\/messages.fr.xlf”,<\/p>\n

\/\/.. } }<\/p>\n

Moreover, we will add another property in this path: architect > build > options<\/p>\n

Add “localize”:\u00a0true<\/p>\n

Now the app is ready to build; by using Angular CLI, we will write this command \u201cng build –localize\u201d.<\/p>\n

For more details and in-depth understanding please check Angular<\/a> Documentation.<\/p>\n

\u00a0<\/strong><\/p>\n

Format Data Based on Locale<\/strong><\/h3>\n

We will use the pipes that Angular provides for this purpose, notice the data transformation pipes use the LOCALE_ID<\/a>\u00a0token to format data based on rules of each locale.<\/p>\n

 <\/p>\n

Currencies Formatting<\/strong><\/h3>\n

Using CurrencyPipe<\/a> transforms a number into a currency string.<\/p>\n

currency<\/a>Obj: number = 0.359;<\/p>\n

{{currency<\/a>Obj | currency<\/a>}}\u00a0 \/\/ output ‘$0.36’<\/p>\n

 <\/p>\n

Numbers Formatting<\/strong><\/h3>\n

Decimal Pipe transforms a number into a decimal number string.<\/p>\n

pi: number = 3.14159265359;<\/p>\n

Without specified formatting:<\/p>\n

{{pi | number}}\u00a0\u00a0\u00a0 output: ‘3.142’<\/p>\n

With specified formatting:<\/p>\n

{{pi | number:’4.1-5′}} output: ‘0,003.14159’<\/p>\n

With specified formatting and locale:<\/p>\n

{{pi | number:’4.1-5′:’fr’}} \u00a0output: ‘0\u202f003,14159’<\/p>\n

 <\/p>\n

Numbers Dates<\/strong><\/h3>\n

Use DatePipe to format a date value.<\/p>\n

 <\/p>\n

dateObj: number = Date.now();<\/p>\n

 <\/p>\n

{{ dateObj | date<\/a> }} \/\/ output is ‘Jun 15, 2022’<\/p>\n

or format like<\/p>\n

{{ dateObj | date<\/a>:’medium’ }} \/\/ output is ‘Jun 15, 2022, 9:43:11 PM’<\/p>\n

 <\/p>\n

Conclusion<\/strong><\/h4>\n

The localization of an application is an important aspect to consider when starting the design process. By developing the application to be language-independent and able to handle the intricacies of multiple languages from inception, you will save time and money.<\/p>\n

With the continued growth of the global marketplace, most websites nowadays are prepared for localization. Angular makes this process easier by providing simple localization techniques, with simple steps to follow, you can get a fully localized application. Designing an application with localization in mind is the best practice to avoid a lot of complexity when localization is introduced at later stages of the project lifecycle.<\/p>\n","protected":false},"excerpt":{"rendered":"

When building an application, it is not a question of if it might be used by a global audience, but a matter of when it will be offered to global markets. This is why it is important to build an application with internationalization (i18n) in mind. Planning to support multiple languages, not only includes the […]<\/p>\n","protected":false},"author":42,"featured_media":36816,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[1314,1711,1196,673,1783,1712],"_links":{"self":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts\/36815"}],"collection":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/comments?post=36815"}],"version-history":[{"count":6,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts\/36815\/revisions"}],"predecessor-version":[{"id":36827,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts\/36815\/revisions\/36827"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/media\/36816"}],"wp:attachment":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/media?parent=36815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/categories?post=36815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/tags?post=36815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}