Angular 2 Material Input change placeholder dynamically

Question

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'));

Polinski

why are you using document.getElementById you can change using binding – Laser

Answer 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.

Laser

I 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. – Geology

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

Bilbo

Answer 3

another option may be in the HTML, use square brackets whith attribute binding:

<input formControlName="events" type="text" [attr.placeholder]="newPlaceHolder">

In your typescript file, define the property:

newPlaceHolder: string = "text binding" 

Raffle

Answer 4

This one works great for me:

(I use it to show dynamic error on mat-autocomplete form field)

on your HTML:

 [placeholder]="isPlaceHolderShowError('myFormControlName')"

on your TS:

    isPlaceHolderShowError(myFormControlName) {
    if (this.form.controls[myFormControlName].invalid && this.form.controls[myFormControlName].touched) {
      return 'this is my error text'
    }
    return 'this is the initial placehloder'
  }

Hopson