how to translate the html5 placeholders dynamically

Question

I'm using angular-translate to translate the page content in to different languages.

<input  type ='text' placeholder = ' {username | translate}'>

This works fine when the page loads ..but it fails to translate when I use $translate.uses('fr') depending upon language dropdown changes.

Can any one kindly suggests the solution to translate the placeholders while the language changes dynamically ?

Runkle

<input type ='text' placeholder = ' {username | translate}'> – Runkle

username must be a string, so you have: <input type ='text' placeholder = "{'username' | translate}"> – Salmagundi

Answer 1

Did you try:

<input type="text" placeholder="{{ 'my.i18n.key' | translate }}" ng-model="myModel">

Kruter

For me doesn't..<input name="login_form_email" type="email" placeholder="{{'login.default_email' | translate }}" required> not translating runtime – Series

For me it is not working, the problem comes when you do it at runtime, not at start. – Cacique

This approach is deprecated, see @armyofda12mnkeys' answer, there is a directive to translate the placeholder – Semipalmate

That doesn't work on Internet explorer, the documentation is pretty clear about this point. When the interpolation is being proceed an error/crash will appear. You should use custom placeholder directive to handle it as you want – Criterion

This answer is close, but technically it is a better practice to use ng-attr-placeholder as the attribute because then Angular can hold off on display the value until it is actually ready (after the translation). The jank when using the original placeholder attribute is usually so fast you can't see it, but it will be possible for a user to see the untranslated key for a moment if you do it like the posted answer. – Lumbard

The pipe 'translate' could not be found – Pablo

Hello. This solution works for me. May you add docs where I may deep into this? – Insusceptible

Answer 2

There is a directive in angular-translate to help with this. See this issue.

<input placeholder="Regular Placeholder" translate translate-attr-placeholder="text" translate-value-browser="{{app.browser}}">

Here is a preview of a working plunkr from that thread: http://plnkr.co/edit/J4Ai71puzOaA0op7kDgo?p=preview

Plenty

This is the best solution to translate the placeholder attribute. – Agglutinate

Answer 3

+ira 's solution works for me.

<input type ='text' placeholder = "{'USERNAME' | translate}">

where username is the key for the translation. So that translation JSON line might look like the following in Spanish

"USERNAME": "Nombre",

The two together puts Nombre as a placeholder inside the input box

Kershner

it works but should be two curly braces – Nepos

Answer 4

I Use this method:

In en.json:

{
   "ENTER_TEXT": "{{label}} را وارد کنید",
   "DISCOUNT_CODE": "کد تخفیف"
}

In template:

<input type="text" placeholder="{{'ENTER_TEXT' | translate: {label: 'DISCOUNT_CODE' | translate} }}" >

Vincennes

Answer 5

I used placeholder="{{ 'some_text' | translate }}" instead of placeholder="{{ "some_text" | translate }}" that worked for me

Alyssaalyssum