How I can add dropdown arrow within input in mat-autocomplete

mat-autocomplete events
mat-autocomplete displaywith
mat-autocomplete panel width
angular material select with search
mat-autocomplete disable

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

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"

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

In CSS file

.align-arrow-right {
    position: absolute;
    right: 0; //change as per requirement
    top: 0; //change as per requirement

How I can add dropdown arrow within input in mat-autocomplete, 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 � Drop-down items, specified as a cell array of character vectors, string array, or 1-D categorical array. Duplicate elements are allowed. The drop-down component displays as many options as there are elements in the Items array. If you specify this property as a categorical array, MATLAB uses the values in the array, not the full set of categories.

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

How I can add dropdown arrow within input in mat-autocomplete , Start by creating the autocomplete panel and the options displayed inside it. Next, create the input and set the matAutocomplete input to refer to the template� 2 thoughts on “ Fast Autocomplete Dropdown For Input Field – autocomplete.js ” Gerald May 20, 2019 Hi, I am trying to develop a Javascript drop down list and your work will help me a lot in getting started.

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 only:

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.

Autocomplete, @Input('class'). classList: string. Takes classes set on the host mat-autocomplete element and applies them to the panel inside the overlay container to allow for� (I also tried setting disabled on mat-form-field and mat-autocomplete.) Setting matAutocompleteDisabled on input prevented the options from showing, but still allowed typing in the field. Setting readonly on input prevented typing, but it doesn't change the UI, so seems like that will be confusing for the user.

Autocomplete, User should be able to navigate the autocomplete panel with arrow keys when nothing is typed in associated input field. What is the current <input matInput [ matAutocomplete]="language" Can you put together an example that shows it breaking? rdu-multi-select-autocomplete.toolbar-component,� The simplest way to get an arrow to show next to a select/dropdown option is to just add one in the text using a HTML entity or Unicode character. Here's a list of arrows you can use: HTML Arrows . I'd suggest → ( &rarr; ) or similar (not sure which direction you want!)

Angular Material Autocomplete Component Force Selection , Force the user to choose an item in Angular Material autocomplete the autocomplete component does not validate what you type in the input box or navigate with arrow keys and press the enter key to make a selection. Firstly, create a new file requireMatch.ts and add the following function: mat- autocomplete >. to change that little arrow next to a select, and the underline. For example, I did /deep/ .mat-input-container.mat-focused .mat-input-underline { background-color: #63961C; } for the underline of an Input, and it worked fine (it becomes green when focusing). (yes /deep/ works fine for this project, though it's deprecated now if I remember well)

Select Menus - Material Design, The select uses an MDCMenu component instance to contain the list of options, but uses the class="mdc-select__dropdown-icon-graphic" Leading icons can be added within the default or outlined variant of MDC Select as visual� function autocomplete(inp, arr) { /*the autocomplete function takes two arguments, the text field element and an array of possible autocompleted values:*/

  • See…
  • I'm not sure, but i used mat-icon here in this piece of code, with matSuffix directive.
  • This is a great answer, but clicking on the down arrow does not trigger autocomplete dropdown. Any solution for that?
  • Good catch, we had the same issue and solved it, but I forgot to update the snippet above. Just add the last line, pointer-events: none; and the click will go through the arrow to the input field 😉
  • Wow! Why I didn't thought of that! Thanks!!