Autocomplete component for Angular Material. Use for this Material for angular 2+ (i.e., `@angular/material/autocomplete`).
Questions tagged [mat-autocomplete]
144 questions
1
vote
1 answer
mat-autocomplete option not selected
I have an input form with an autocomplete. It filters options as the user types. The problem is that when an option is clicked, the field goes blank instead of it being populated with the user's selection.
Here is my HTML:

itman312
- 11
- 1
- 8
1
vote
1 answer
Using Angular's matAutocomplete, how do I display an object's property, but reference the object itself elsewhere?
For example I have the markup:

Tyler Lyle
- 47
- 1
- 6
1
vote
2 answers
Refer to autocomplete inputs generated dynamically with ngFor loop
I'm setting an invoice Angular page where lines are added dynamically, every line should have an own autocomplete input with other different inputs.How can i refer to each autocomplete input independently inside my component so i can use the right…

AmYne Gaïeb
- 130
- 3
- 13
1
vote
1 answer
How to set filter with mat auto select in angular template driven form
How to set filter with mat auto select in angular template driven form.

Bharat Chauhan
- 3,204
- 5
- 39
- 52
1
vote
1 answer
how to open mat-autocomplete panel on the 'optionSelected' event of another mat-autocomplete?
how to open mat-autocomplete panel on the (option-Selected) event of another mat-autocomplete
please refer the example here https://stackblitz.com/edit/angular-material-autocomplete-mqnxp5

Arunkarthick S R
- 13
- 3
1
vote
1 answer
Cascaded Angular Material Design sample (with reactive forms)
Any good demo/sample showing how to cascade multiple angular mat-autocomplete controls? All the references I've seen only show one standalone autocomplete. I need to link two controls (possibly three) using reactive forms.
A good similar sample…

Alex
- 285
- 4
- 11
1
vote
0 answers
Search table based on selected mat-autocomplete value in angular 6
I have two mat-autocomplete view in my page. For this i am using this angular material example.
https://stackblitz.com/angular/lnnnrgqxjmd?file=app%2Fautocomplete-overview-example.ts
This same example i am using.
In the same page i have a table.for…

ananya
- 1,001
- 6
- 33
- 50
1
vote
1 answer
Angular materialAutoComplete field service call pulls data slower than user types in
this.filteredContact = this.contactControl.valueChanges.pipe(
startWith(''),
debounceTime(200),
map(val => this.filterContact(val))
);
filterContact(val: string): any {
if (val.length > 2) {
return _.filter(
…

Sundar
- 655
- 2
- 7
- 13
1
vote
0 answers
Unable to map autocomplete valueChanges with Cloud Firestore database
I am using material autocomplete in a project but unlike their example, I'm pulling from cloud firestore database (beta).
I previously set up a service to handle retrieving the data from json server and this worked fine.
ngOnInit() {
…

mduve
- 143
- 1
- 3
- 9
1
vote
1 answer
angular material mat-autocomplete issues
i am having a input box with mat-autocomplete. there is a search button that i hit to get the matching entries to populate the suggestions. Though overall it works but the behavior is bit annoying. This is what happens:
I type ra and hit…

Vik
- 8,721
- 27
- 83
- 168
0
votes
0 answers
How to use ngx-infinite-scroll in mat-autocomplete
I want to use ngx-infinite-scroll in mat-autocomplete but seems that it does not triggered scrolled event when scroll bar reach to the end of mat autocomplete panel.
What I tried: complete code is Here

Alireza Ahmadi
- 8,579
- 5
- 15
- 42
0
votes
0 answers
In angular, mat-autocomplete won't close on click outside when opened in mat-dialog
I am working with form inside mat-dialog and i have problem with closing mat-autocomplete dropdown when clicked outside. I have mat-select implemented the sam way and he is working properly.
Here is my implementation for both elements
Autocomplete
…

Josip Maričević
- 189
- 3
- 18
0
votes
0 answers
Transition does not work in mat-autocomplete in angular to have expandable search box
I implemented search box with mat autocomplete angular material. But when I want to set animation for my search box, It does not work. I want That when I click on search Icon, It opens autocomplete search box . And when I click on search icon in…

Z.Mg
- 1
- 2
0
votes
0 answers
Setting mat-autocomple value with values as objects and displayWith
I'm using mat-autocomplete in order to select an item. I'm populating the list with objects, so I have
my label

gnc
- 41
- 7
0
votes
0 answers
Angular Material mat-autocomplete not visible in Browser area
I have the problem that I have a small autocomplete field on the far right, but the text is so long that it goes outside the visible area of the browser.
How can I force the overlay to align to the left?
enter image description here
No Idea at the…