Angular 2 i18n message with HTML tag inside

user_2759595 0
Viewed 5271

Im trying to translate my app using the i18n official implementation of angular 2: https://angular.io/guide/i18n and im trying to translate some message with HTML inside (font awesome icons lets say).

For example this:

<p i18n="instagram-widget.instagram|Instagram name in the foot gallery @@instagramInstagramWidget"
  class="text-muted text-center">
  <i class="fa fa-instagram fa-lg mx-1" aria-hidden="true"></i> 
  Instagram
</p>

when i generate the translation file using either ng xi18n or ./node_modules/.bin/ng-xi18n i get the following translation unit.

<x id="START_ITALIC_TEXT" ctype="x-i"/><x id="CLOSE_ITALIC_TEXT" ctype="x-i"/> Instagram

i create a translation file for es locale and when i serve my app using the new locale the font awesome icon is missing, only shows the text instagram.

This problems happens with any nested HTML tags where the parent is being translated.

angular-aot angular2-aot angular-i18n angular internationalization
3 Answers

you can wrap it in a tag. 

 <p class="signupLink">
    <span i18n="@@loginPageNewAtProof">New at Proof?</span>
    <span i18n="@@loginPageSignupHereProof"><a routerLink="/signup">Signup here</a></span>
  </p>

then

  <trans-unit id="loginPageNewAtProof" datatype="html">
      <source>New at Proof?</source>
      <target>Nouveau chez Proof?</target>
</trans-unit>

<trans-unit id="loginPageSignupHereProof" datatype="html">
      <source>Signup here</source>
      <target>Inscrivez-vous ici</target>
</trans-unit>
user_64334500
Related