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 ?

username must be a string, so you have: – ira Dec 24 '14 at 13:33 — ira, Dec 24 '14 at 13:33

score 109 · Accepted Answer · answered Feb 21 '14 at 22:40

109

Did you try:

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

answered Feb 21 '14 at 22:40

DrDyne

For me doesn't.. not translating runtime – artdias90 Dec 04 '14 at 19:55
1

For me it is not working, the problem comes when you do it at runtime, not at start. – Luis Molina Jan 21 '15 at 16:29
5

This approach is deprecated, see @armyofda12mnkeys' answer, there is a directive to translate the placeholder – Bruno Peres Jul 28 '15 at 22:05
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 – Disfigure Aug 23 '16 at 07:40
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. – claywhipkey Feb 21 '18 at 16:55
The pipe 'translate' could not be found – integrater May 07 '20 at 16:41

score 32 · Answer 2 · edited Jul 29 '15 at 00:44

32

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

edited Jul 29 '15 at 00:44

Bruno Peres

answered May 08 '15 at 05:16

armyofda12mnkeys

1

This is the best solution to translate the placeholder attribute. – LuckyStarr Oct 22 '15 at 10:24

score 5 · Answer 3 · answered Feb 16 '15 at 19:33

5

+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

answered Feb 16 '15 at 19:33

Mike_Laird

score 4 · Answer 4 · answered Jul 02 '19 at 12:21

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} }}" >

answered Jul 02 '19 at 12:21

score 3 · Answer 5 · answered Sep 21 '20 at 14:32

3

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

answered Sep 21 '20 at 14:32

Issam Baccouch

5 Answers5