How to hide placeholder onclick in material


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

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

enter image description here

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


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

In TS:

myplaceHolder: string ='Enter Name'

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

Answered By – Akj

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.