Angular mat input mat icon hide show

user_19586987 0
Viewed 99

my code I have an input with a mat icon that allows to clear the field the icon is displayed each time a value is present.

What I would like to do is that the icon is not displayed when there is a value but only when I hover the mouse over it.

Thanks in advance.

html

 <mat-form-field appearance="fill">
  <mat-label>Clearable input</mat-label>
  <input matInput type="text" [formControlName]="controller">
    <mat-icon matSuffix *ngIf="controller.value" class="iconDisplay" (click)="clearInput()">highlight_off</mat-icon>
</mat-form-field>

ts

export class testComponent {
  @Input() public controller: AbstractControl;


 clearInput() {
  this.controller.setValue(null)
 }
}

scss

.iconDisplay {
 visibility: hidden
}

input:hover > .iconDisplay {
 visibility: visible
}
angular-material angular typescript css html
2 Answers

You use something like:

<input ... [ngClass.iconDisplay]="showIcon" (mouseover)="showIcon=true" (mouseout)="showIcon=false"
user_67258800

I had a similar use case and here's how I did it:

HTML:

<div class="clearableInput">
    <mat-form-field appearance="fill">
        <mat-label>Clearable input</mat-label>
        <input matInput type="text" [formControlName]="controller">
        <div class="iconDisplay">
            <mat-icon matSuffix *ngIf="controller.value" class="iconDisplay" (click)="clearInput()">highlight_off</mat-icon>
        </div>
    </mat-form-field>
</div>

CSS:

.clearableInput{
  &:hover {
    .iconDisplay {
      display: block !important;
    }
  }
}
.iconDisplay {
  display: none;
}

Hope this helps! :)

user_66393170
Related