Angular2 i18n for placeholder text

Simon Briggs picture Simon Briggs · Oct 31, 2016 · Viewed 16.7k times · Source

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

evandongen picture evandongen · Nov 2, 2016

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.