-
Notifications
You must be signed in to change notification settings - Fork 28
Angular i18n
David Klingenberg edited this page Feb 27, 2017
·
2 revisions
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>
Wrap text into <ng-container></ng-container>
element.
Example:
<ng-container i18n>I don't output any element</ng-container>
Use i18n-
prefix for attribute.
Example:
<img [src]="logo" i18n-title title="Angular logo" />
Pluralization uses ICU format
<span i18n>{wolves, plural, =0 {no wolves} =1 {one wolf} =2 {two wolves} other {a wolf pack}}</span>
<span i18n>The hero is {gender, select, m {male} f {female}}</span>
-
gender
is string property -
select
says to select from provided options -
m
andf
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 likedefault
- pluralization and alternative texts follow ICU format
More details in Angular documentation