Angular2 i18n for placeholder text

Question

Is there a way to translate placeholder text to enter a text box using Angular 2 i18n?

<input placeholder="hello world" i18n>

I don't see anything in the documentation about this: https://angular.io/docs/ts/latest/cookbook/i18n.html

Answer 1

There was an example, but I can no longer find it.

You can use i18n-attributename . For example:

 <input type="number" placeholder="From" i18n-placeholder="From placeholder"/> 

To do this, you need the following entry:

 <trans-unit id="generatedId" datatype="html"> <source>From</source> <target state="translated">Van</target> <note priority="1" from="description">From placeholder</note> </trans-unit> 

In your messages.xlf file. I could not get it to work without translation. Therefore, you will need to add state = translated and value.

Even if we do not give a value in i18n-placeholder , then this is also fine. just do:

 <input type="number" placeholder="From" i18n-placeholder/> 

it will work fine.

Answer 2

To add @evandongen to the answer, here, where this is documented in Angular Docs:

Updated link:

https://angular.io/guide/i18n#translate-attributes

Add i18n translation attributes

---

To mark an attribute for translation, add the attribute in the form i18n-x, where x is the name of the attribute for translation. The following example shows how to mark the title attribute for translation by adding the i18n-title attribute to the img tag:

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

This technique works for any attribute of any element.

You can also assign a value, description, and identifier using the syntax i18n-x="<meaning>|<description>@@<id>" .