I use mat-autocomplete to filter my data. Everything is work but I want to have a dropdown arrow to show all option within the input.
In md-autocomplete , we can use dropdown-arrow="true" but in mat-autocomplete is not support it.
So how I can add a dropdown arrow in mat-autocomplete?
This is my component.ts
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" aria-label="Number" matInput
[formControl]="myControl" [matAutocomplete]="auto4"
[hidden]="loadWithFilters&&loadWithFilters.field==='IP'">
<mat-autocomplete #auto4="matAutocomplete" dropdown-arrow="true"
(optionSelected)="onFilterOptionSelected($event,'IP')" >
<mat-option *ngFor="let option of filteredIP | async"
[value]="option.key">
{{option.value}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
essentially you are attaching an mat-autocomplete
with an matInput
, so you can style the form-field
separately and then attach the mat-autocomplete
to it.
please refer this stackblitz for full code demo.
form-field
icons can be added like this.
Your code should look like this -
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto4"/>
<mat-icon matSuffix>keyboard_arrow_down</mat-icon>
<mat-autocomplete autoActiveFirstOption #auto4="matAutocomplete" (optionSelected)="onFilterOptionSelected($event)" >
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
You can add mat-icon just after <input>
control and give some style to position this and make sure to use position: absolute
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" aria-label="Number" matInput
[formControl]="myControl" [matAutocomplete]="auto4"
[hidden]="loadWithFilters&&loadWithFilters.field==='IP'">
<i class="material-icons align-arrow-right">arrow_drop_down</i>
<mat-autocomplete #auto4="matAutocomplete" dropdown-arrow="true"
(optionSelected)="onFilterOptionSelected($event,'IP')" >
<mat-option *ngFor="let option of filteredIP | async"
[value]="option.key">
{{option.value}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
In CSS file
.align-arrow-right {
position: absolute;
right: 0; //change as per requirement
top: 0; //change as per requirement
}
Using FontAwesome (or any other icon library, as long as you know the code the for the caret down icon), I did it with the following CSS:
input + mat-autocomplete:after {
content: "\f0d7";
font-family: "FontAwesome";
right: 0;
bottom: 4px;
position: absolute;
color: dimgrey;
pointer-events: none;
}
For added effect you can add the following rule to switch the arrow up when the drop-down is expanded:
input[aria-expanded="true"] + mat-autocomplete:after {
content: "\f0d8";
}
If you don't want to use an icon library you could use the Unicode black down-pointing triangle.
Oh, and your target browsers need to support sibling CSS operators.
Just improving on Nakul's answer. Create mat-icon or span with matSuffix after input and bind autocomplete events to hide/show drop-down arrow
<mat-form-field class="example-full-width">
<!-- Input -->
<mat-label>Assignee</mat-label>
<input
type="text"
matInput
[formControl]="myControl"
[matAutocomplete]="auto"/>
<!-- Mat-Icon or Span -->
<mat-icon matSuffix>
<button style="padding: 0; margin: 0; border: 0; background-color: transparent;">
<span class="material-icons" matTooltip="Click to select an User">
{{arrowIcon}}
</span>
</button>
</mat-icon>
<!-- Auto Complete -->
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"
(opened)="arrowIcon='arrow_drop_up'"
(closed)="arrowIcon='arrow_drop_down'"
(optionSelected)="arrowIcon='arrow_drop_down'">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
Declare variable arrowIcon
in TypeScript file that stores the current icon name
Create button inside mat-icon
to show user hand instead of pointer when user hovers mouse on arrow icon
Make use of (opened)
, (closed)
and (optionSelected)
events to change drop-down icon name
Here is the working StackBlitz demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With