Angular2 i18n for placeholder text

Question

Is there a way to translate the placeholder text for an input text field using Angular 2's 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 has been an example, but I can't seem to find it anymore.

You should be able to use i18n-attributename. For example:

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

That would need an entry like this:

<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 couldn't get it to work without a translation though. So you will need to add the state=translated and a value.

Even if we don't give value in i18n-placeholder then it is also fine. just do like:

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

it will work fine.

Answer 2

To add to the answer from @evandongen, here's where this is documented in the Angular docs:

Updated link:

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

Add i18n translation attributes

---

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

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

This technique works for any attribute of any element.

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

Answer 3

I used this attributes

 <input type="submit" value="{{ 'LOGIN.LOG' | translate }}" class="btn btn-box btn-log-in in-white">