Search code examples
angular-materialmaterializemat-input

How to update Mat-Input Place Holder on Focus

I have this material input field where I would like to have a different placeholder When the user focuses the input.

When No Focus & No Value

enter image description here

When User Focuses it

enter image description here

When User Have some Value & Focuses it

enter image description here

Is there an event or work around in Material to achieve the same. 

<mat-form-field class="example-full-width">
    <input matInput #message maxlength="256" placeholder="Your Message Goes Here">
  </mat-form-field>
Solution

  • You can accomplish this by passing a class variable to your placeholder property via property binding.

    In your component create property variable with default value

    myPlaceholder = 'Your Message Goes Here'

    Assign variable to property [placeholder] and change to Message on mat-form-field click

    <mat-form-field class="example-full-width" (click)="myPlaceholder = 'Message'">
    <input matInput [placeholder]="myPlaceholder">
  </mat-form-field>

    Stackblitz

    https://stackblitz.com/edit/angular-fsbbzr?embed=1&file=app/input-overview-example.ts