How to hide placeholder onclick in material

I came into this question when looking for a way of hiding the placeholder when the input field is not empty, the solution I found is a modification of Krishna's, replacing the mat-form-field floatLabel argument from always to never:

<div class="example-container">
  <mat-form-field
      [floatLabel]="'never'">
    <input matInput placeholder="Simple placeholder" required>
  </mat-form-field>
</div>

You can try:

DEMO ----> Solution

You can also create Directive for same

You can replace (click) ----> (focus) as you need

 <mat-form-field floatLabel=never>
     <input (click)="checkPlaceHolder()" (blur)="checkPlaceHolder()" matInput placeholder=" {{myplaceHolder}} ">
 </mat-form-field>

In TS:

myplaceHolder: string ='Enter Name'

 checkPlaceHolder() {
    if (this.myplaceHolder) {
      this.myplaceHolder = null
      return;
    } else {
      this.myplaceHolder = 'Enter Name'
      return
    }
  }

you can try this solution.

use [floatLabel]="'always'"

I have create a demo on Stackblitz

<div class="example-container">
  <mat-form-field
      [floatLabel]="'always'">
    <input matInput placeholder="Simple placeholder" required>
  </mat-form-field>
</div>