Angular 2 Material Input change placeholder dynamically

maidi picture maidi · Jun 1, 2017 · Viewed 26.5k times · Source

I want to change the text of the input placeholder dynamically. The console.log already gives the updated string but the interface doesn't update so there stays the old placeholder. How can I get the Interface to recognize the change?

document.getElementById(this.implicKey).setAttribute('placeholder', options[i].implication);

console.log(document.getElementById(this.implicKey).getAttribute('placeholder'));

Answer

CharanRoot picture CharanRoot · Jun 1, 2017

you can change your input placeholder dynamically like this

<md-input-container class="demo-full-width">
                <input mdInput [(ngModel)]="firstname" placeholder="{{somePlaceholder}}" name="firstname" required>
                <md-error>This field is required</md-error>
            </md-input-container>

component.ts

somePlaceholder : string = "new value";

now you can change somePlaceholder value any where in the class.