5

I would like to dynamically set <input type='text' placeholder=' {{ 'somestring' | getText }}'> placeholders using pipes. (this method does not work)

The pipe itself works perfectly fine e.g. <p>{{ myVariable | getText}}</p> will correctly render, as well as <p>{{ 'someString' | getText}}</p>

How does one use this to dynamically set placeholder strings?

longbow
  • 1,593
  • 1
  • 16
  • 39

1 Answers1

13

You can either use Matthias's suggestion or use double quotes for attribute/property/binding values. As a matter of fact, -always- use double quotes!

<input type="text" placeholder="{{ 'somestring' | getText }}">

or

<input type="text" [placeholder]="'somestring' | getText">
Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149
  • thanks for unknowingly putting me on the right path, i declared a `[formControl]` without actually having one in the component.ts ... so ofc before setting the placeholder he died (without any error msg in console obvisously) the pipe part itself works fine now with either variant :) – longbow Nov 15 '16 at 17:44
  • @longbow glad i could 'help' :) but still remember to always use double quotes :D – Poul Kruijt Nov 15 '16 at 20:11
  • For me the problem was single quotes in the string, so I have to do `placeholder="{{ 'somestring' | getText }}` instead of `placeholder="{{ "somestring" | getText }}` (which works other places. – Kikkomann Dec 19 '19 at 17:06
  • @Kikkomann that's exactly my answer :), but glad it works for you too – Poul Kruijt Dec 20 '19 at 04:34
  • @PierreDuc I know, but it was just because you said "always use double quotes" and using double quotes within the pipe was what failed for me – Kikkomann Dec 20 '19 at 15:45