Change the value of an input placeholder


Hi there!

I’m pretty new to Ionic and Angular, so that might be a really easy question, but I googled and couldn’t find a good answer. I learned to use Ionic, and didn’t get to learn the basis of Angular so that might be the issue.

I have an app that use a function to print any text displayed. I use it to so people can switch language. It works really well!

Sadly, I need to do it for a placeholder and it doesn’t work the same way.

<input type=“text” placeholder="{{ getText(“email”) }}" > doesn’t work.

How can I do it? The getText function is a function in TypeScript that get the right value.I can’t find how to do it in typescript, do I have to do it directly in angular? Will I be able to call my typescript function?

Thank you!!


I think you could use Property Binding on placeholder, like <ion-input [placeholder]="variable"></ion-input>.


I’m a bit slow so just to be clear, I could do :

<ion-input type=“test” [placeholder]="{{ getText(“password”) }} >

and it should use my getText function to set my placeholder value?

Thank you!


I suggest you read some articles about PROPERTY BINDING, EVENT BINDING and TWO WAY DATA BINDING. Some Angular 2 Concepts and Syntax will be great too, like this article from Josh Morony, Ionic 2 First Look Series: New Angular 2 Concepts & Syntax.

But answering your question, it will set the elements property to the expression variable, and will update when detect a change. You don’t need use the getText.


Do this. It will solve a lot of problems for you. I’d say 90% of questions on this forum are because people either don’t understand Angular or they don’t understand Typescript. Only about 10% of questions are about Ionic. Which is ok, but you’ll save yourself a headache if you learn Angular and Typescript now.


Oh just to be sure :

My getText function is a function that check the current language and return the correct value, that’s why I use it. It will work in that case too right?

I will read those docs tonight!


I already bought a Angular course on udemy, sadly I’m out of time on this project and I have to deliver fast.

Client want a fast delivery at the cost of the quality, so I got no choice.

As soon as this project is over, you can be sure I will learn angular. It’s a pain to code when you know you are not using 100% of the tools available.


It worked!!

Thanks for the awesome solution!