0

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>
TBA
  • 1,077
  • 5
  • 41
  • 80

1 Answers1

1

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

Marshal
  • 10,499
  • 2
  • 34
  • 53
  • Thanks that's solved my issue. Add another blur event to replace the Placeholder in case user did not type anything – TBA Dec 11 '18 at 06:48