Using ng2-translate pipe or directive for placeholder

Question

I would like to use ng2-translate for placeholder. Only way to do this I found is use ng2-translate service and pass variable to placeholder like this:

class Form {
  placeholder: string;

  constructor(translate: TranslateService) {
    translate.get('placeholder.value').subscribe(
      (placeholder: string) => this.placeholder = placeholder,
    );
  }
}

<input type="email" placeholder={{placeholder}}/>

But it looks bulky. Is there way to use ng2-translate for placeholder with pipe or directive?

score 5 · Accepted Answer · edited Jan 17 '17 at 07:59

5

As per documentation, If your language json file is a below

{
  "placeholder": {
    "value" : "Your placeholder text"
  }
}

then you can use translate pipe as below :

<input type="email" [placeholder]="'placeholder.value' | translate" />

edited Jan 17 '17 at 07:59

qwe asd

1,598
3
21
31

answered Jan 17 '17 at 06:51

ranakrunal9

13,320
3
42
43

For me, this case works with text (div, span etc.), but with input it renders not input control but text: – qwe asd Jan 17 '17 at 06:58
1

may be `` will work, check it . – ranakrunal9 Jan 17 '17 at 07:37

Using ng2-translate pipe or directive for placeholder

1 Answers1