Angular 2 i18n message with HTML tag inside

Related searches

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.

Internationalization (i18n), For a list of language codes, see ISO 639-2. Mark the static text messages in your component templates for translation using the i18n attribute. To mark the greeting for translation, add the i18n attribute to the <h1> tag. element, which is transformed into a non-displayed HTML comment as shown in this example:. The internal HTML tags should remain untouched as static text, or at least be substituted as a wildcard like some kind of variable. Minimal reproduction of the problem with instructions. Create an HTML element with some nested HTML element and try to i18n first one, for example: <p i18n> This is a <small>example</small></p>

The problem was related to the translators i was using.

The translators remove the placeholder tags () and leave only the plain text, what i did is manually look over all the translations strings and add the placeholders where originally are.

Angular uses this placeholders to avoid translators modifying your HTML tags by mistake, in the translation process angular take this placeholders tags and replace it for the original tags in the view (https://github.com/angular/angular/issues/18302)

I cant find (yet) a translation tool that doesnt remove those placeholders

[Question] How to include html tags in your translation strings � Issue , @phiphou This binding not working in IE 11 :( 2. This generates the following message for the translator which confuses them because it's hard to add context on this kind of messages, or it needs to be really verbose such as "Between the START_SPAN_TAG and CLOSE_SPAN_TAG, there will be a list of links like <a>1</a>, <a>2</a>, <a>3</a>"

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>

i18n: Adding HTML tags in target translation doesn't work anymore , In Angular 6, HTML Tags in xliff tranlation file (<target>) are not rendered When exporting, the <br> got escaped in messages.de.xlf like <br> but Angular 5 rendered it 0.6.8 @angular/cli 6.1.0 rxjs 6.2.2 typescript 2.7.2� Then we’ll make a script inside package.json that uses the Angular CLI to extract this into a messages.xlf file which contains all of our marked items: { "scripts": { "int:extract": "ng xi18n" } } After adding this, run npm run int:extract inside of your terminal. Then, open up messages.xlf and you’ll see something similar to this:

Angular 2 i18n message with HTML tag inside - angular, 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 � I’m using dock-spawn library for my angular app. Also, I use i18n for localizations. The library puts a header name from data-panel-caption tag. <div id="solution

How to use Internationalization (i18n) in Angular, We'll specifically be looking at using the built-in i18n inside of this article. project, head over to app.component.html and create the following template: Then, open up messages.xlf and you'll see something similar to this: Tutorials � Q&A � Tools and Integrations � Tags � Product Ideas � Write for� ng xi18n --i18n-locale ru --out-file locale/messages.ru.xlf. I will be adding support for the Russian locale, therefore I have ru set for the i18n-locale option and messages.ru.xlf set as the output file. You may replace this language code with another one. The above command is going to generate a new messages.ru.xlf file inside the src/locale

Mark the static text messages in your component templates for translation using the i18n attribute. Place it on every element tag with fixed text to be translated. For example, the following <h1> tag displays a simple English language greeting, "Hello i18n!"

Comments
  • I feel like there's a mismatch between the title of this thread and the answers. What if I have a longer text and want to add line-breaks (e.g. <br>)? What is the best practice for doing those translations?