1. i18n

1.1. Setting up the locale of your app

To set your app's locale to another value, use the CLI parameter --configuration with the value of the locale id that you want to use:

ng serve --configuration=fr

1.2. Template translations

The i18n template translation process has four phases:

Mark static text messages in your component templates for translation.
Create a translation file: Use the Angular CLI xi18n command to extract the marked text into an industry-standard translation source file.
Edit the generated translation file: Translate the extracted text into the target language.
Merge the completed translation file into the app. To do this, use the Angular CLI build command to compile the app, choosing a locale-specific configuration, or specifying the following command options.
- --i18nFile = path to the translation file
- --i18nFormat = format of the translation file
- --i18nLocale = locale id

The command replaces the original messages with translated text, and generates a new version of the app in the target language.

1.2.1. Custom id with meaning and description

<!-- meaning | description @@unique custom id -->
<h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>

1.2.2. translate text with html tags

Translate text without creating an element: <ng-container i18n>I don't output any element</ng-container>

1.2.3. Translate attributes

To mark an attribute for translation, add an attribute in the form of i18n-x, where x is the name of the attribute to translate. You also can assign a meaning, description, and id with the i18n-x="<meaning>|<description>@@<id>" syntax.

<img [src]="logo" i18n-title title="Angular logo" />

1.3. Regular expressions for plurals and selections

1.3.1. Pluralization

Suppose that you want to say that something was "updated x minutes ago". In English, depending upon the number of minutes, you could display "just now", "one minute ago", or "x minutes ago" (with x being the actual number). Other languages might express the cardinality differently.

The example below shows how to use a plural ICU expression to display one of those three options based on when the update occurred:

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

The first parameter is the key. It is bound to the component property (minutes), which determines the number of minutes.
The second parameter identifies this as a plural translation type.
The third parameter defines a pluralization pattern consisting of pluralization categories and their matching values.

the three options are specified according to that pluralization pattern. For talking about zero minutes, you use =0 {just now}. For one minute, you use =1 {one minute}. Any unmatched cardinality uses other {{{minutes}} minutes ago}. You could choose to add patterns for two, three, or any other number if the pluralization rules were different. For the example of "minute", only these three patterns are necessary in English.

i18n