mat-autocomplete auto-hide placeholder text on input focus
You can remove the placeholder in the input and add a mat-placeholder
in the mat-form-field
and custom the css with a class.
HTML file:
<form class="example-form">
<mat-form-field floatLabel="never">
<input
matInput
type="text"
aria-label="Number"
matInput [formControl]="myControl"
[matAutocomplete] ="auto">
<mat-placeholder class="placeholder">Search</mat-placeholder>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
CSS file:
.mat-focused .placeholder {
color: transparent;
}
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}