Search code examples
angularangular-materialmat-autocomplete

How can I click dropdown arrow, it will display all option not filter in mat-autocomplete


I have a problem with mat-autocomplete. I created a dropdown arrow within mat-autocomplete to show all options when I click it. When I click on it the first time, it shows all options

But when I choose 1 option and click again it just shows the options that are filtered by my choice option.

I just want it to show all the options when opening the dropdown. How can I resolve it?

My component.html


Solution

  • The easiest way to do this is by clearing your input when clicking on the arrow:

    openAddDiag() { 
        this.myControl2.setValue(""):
    };
    

    but I don't know if this is the wanted behavior if it isn't it requires a more complex structure where you implement a custom search function. Since you explicitly click on the arrow it is not a bad practice to empty the input as you have the intention to make changes (else you wouldn't click).