How to hide placeholder onclick in material

Issue

I am using simple form-field input component as in below code

<mat-form-field class="example-form-field" >
     <input matInput type="search" placeholder="Search"  >
</mat-form-field>

On entering the input fieled by default the placeholder will go above.

How can i hide the placeholder on entering to the input field?

Solution

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
    }
  }

Answered By – Akj

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)