CODEWITHSUNDEEP
angular-materialmaterializemat-input
TBA
TBA

Reputation: 1197

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>

Upvotes: 0

Views: 999

Answers (1)

Marshal
Marshal

Reputation: 11101

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

Upvotes: 1

Related Questions