Angular 2 Material Input change placeholder dynamically
34,412
Solution 1
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.
Solution 2
We can do that using property binding.
In the HTML, use square brackets:
<input formControlName="events" type="text" [placeholder]="newPlaceHolder">
In your typescript file, define the property:
newPlaceHolder: string = "original place holder";
Then, change the property value:
newPlaceHolder= "my new place holder";
Author by
maidi
Updated on January 02, 2022Comments
-
maidi over 2 years
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'));
-
Ε Г И І И О almost 4 yearsI added this function setPlaceholder(value: string) { this.somePlaceholder = value; } and passed it as a closure to my service so I can set the placeholder when data arrives. But it says this is undefined. What am I doing wrong? The service's subscribe happens inside the service class itself and I invoke the closure method onSuccess.