Angular i18n

Translating templates

Translating element

Add i18n attribute to translated html elements. Example:

<h1 i18n>This will be translated</h1>

Description attribute:

<h1 i18n="An introduction header for this sample">Hello i18n!</h1>

Description and meaning (please note changed order of meaning and description, <meaning>|<description>)

<h1 i18n="User welcome|An introduction header for this sample">Hello i18n!</h1>

Please avoid unnecessary whitespaces in translated element. It will get into translation file and it will look messy.

Example:

<h1 i18n="Create Migration Project">
    Create Migration Project
</h1>

<trans-unit id="c600cf4dc08f1269fa9745bfc5c94c548ec7203e" datatype="html">
  <source>
                            Create Migration Project
  </source>
  <target/>
  <note priority="1" from="description">Create Migration Project</note>
</trans-unit>

Translate text without element

Wrap text into <ng-container></ng-container> element. Example:

<ng-container i18n>I don't output any element</ng-container>

Translating attributes

Use i18n- prefix for attribute.

Example:

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

Pluralization

Pluralization uses ICU format

<span i18n>{wolves, plural, =0 {no wolves} =1 {one wolf} =2 {two wolves} other {a wolf pack}}</span>

Alternative texts based on variable value

<span i18n>The hero is {gender, select, m {male} f {female}}</span>

• gender is string property
• select says to select from provided options
• m and f are string values (it is always string, I tried to use true/false for booleans but it didn't work properly)
• it is possible to add other option which will be used if none of provided options matched
• for simplicity it is possible to imagine this expression as switch with string cases. other behaves like default
• pluralization and alternative texts follow ICU format

More details in Angular documentation