Set input field placeholder from pipe

angular angular-pipe
longbow picture longbow · Nov 15, 2016 · Viewed 7.9k times · Source

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?

Answer

Poul Kruijt picture Poul Kruijt · Nov 15, 2016

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

Related questions

Format date as dd/MM/yyyy using pipes

I'm using the date pipe to format my date, but I just can't get the exact format I want without a workaround. Am I understanding pipes wrongly or is just not possible? //our root app component import {Component} from 'angular2/…

Read More
OrderBy pipe issue

I'm not able to translate this code from Angualr 1 to Angular 2: ng-repeat="todo in todos | orderBy: 'completed'" This is what i've done following the Thierry Templier's answer: Component template: *ngFor="#todo of todos | sort" Component code: @Component({ selector: 'my-app', templateUrl: "./…

Read More
What is pipe() function in Angular

Pipes are filters for transforming data (formats) in the template. I came across the pipe() function as below. What does this pipe() function exactly mean in this case? return this.http.get<Hero>(url) .pipe( tap(_ => this.…

Read More