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 not filtering with observable
I have two mat-autocomplete drop downs in a reactive Angular form (Angular and Angular Material v12).
One works. It is pulling an array of objects from a service and does not include an Observable for the options. It is developed similarly to the…
Kevin Dick
- 28
- 1
- 9
1
vote
0 answers
Unit Tests - Unable to create component with mat-autocomplete
I have a reactive form component that is built on 2 mat-autocomplete form control fields and a submit.
Basically, you search a keyword, and autocomplete functionality of the angular material (ng9) lists down a list of matching entries before you can…
Amazed
- 11
- 2
1
vote
1 answer
MatAutoComplete - Update property displayed in displayWith when lang is changed
I'm currently using Angular 11 and I have noticed that when i'm changing the app lang (via a button), the mat-autocompletes selected value isn't translating, but all the available values of the autocompletes are correctly translating.
As you can…
CTR
- 183
- 8
1
vote
0 answers
mat-autocomplete search works fine with mock data , wont work when assigning data from the backend service
mat-autocomplete works great with mock data. when i integrate it with the actual service , It won't populate the dropdown.
my html looks like this
aki
- 175
- 1
- 3
- 14
1
vote
2 answers
Mat Auto Complete does not open dropdown panel after clicking Clear button
I have custom Mat Auto Complete in Angular project. It has 2 suffixes, Clear and Dropdown buttons. When I click on clear button code this.myControl.reset('', { emitEvent: true }); resets the input value. But the dropdown panel does not open. I tried…
Pavan Jadda
- 4,306
- 9
- 47
- 79
1
vote
0 answers
mat-auto-comlete selected value
Arif matubber
- 21
- 5
1
vote
2 answers
Mat-autocomplete panel should be the same width as host input, or wider depending on content
I have an angular autocomplete-tree component and I have an issue with the autocomplete panel width.
I have two requirements that I can solve individually but not together:
The panel should grow once the content is wider than the panel. I used…
Pieter Buys
- 1,280
- 1
- 10
- 20
1
vote
1 answer
Disable input field after select the value in mat autocomplete in angular?
Hi every i want to disable the input field after selected the value in drop down, and i want to reset the selected value using of reset button.
For reference Stackblitz :…
Maniselvam R
- 33
- 1
- 9
1
vote
0 answers
Angular Material mat-autocomplete: Cannot clear option list?
I have tried to delete all the items in the option list of mat-autocomplete by using the following approaches and similar ones, but although the value in the text field is cleared, the list items still present on the list. Ho can I completely clear…
Jack
- 1
- 21
- 118
- 236
1
vote
1 answer
Grouping together multiple control value changes
autocomplete functionality to trigger a filter function for each form control respectively.
Is there a way to group the statements instead of individually using multiple observables and separately writing them down as I did…
user10127047
1
vote
2 answers
How to highlight option value in angular mat-autocomplete after setValue?
This is the maximum simplified code sample:
https://stackblitz.com/edit/angular-8r153h-wcvefg?file=app/autocomplete-sample.ts
the problem is that: selected item is not highlighted in the list, when I manually set formControl…
Marius Kazlauskas
- 221
- 4
- 24
1
vote
1 answer
Angular Material Autocomplete: Autocomplete Panel doesn't collapse on Page Scroll when there are more than one Autocomplete control
As shown in the stackblitz, I'm facing issue in closing the Autocomplete controls except first Autocomplete control(City) on Page Scroll when there are multiple Autocomplete Controls as shown in the stackblitz sample.
Steps to reproduce:
Click on…
BVS
- 421
- 1
- 9
- 17
1
vote
1 answer
Angular Query-builder: How to lazily load data for options (possible values) for material auto-complete
I am currently working with Angular-QueryBuilder and updating templates for with ng-container with angular-material.
Paritosh
- 11,144
- 5
- 56
- 74
1
vote
1 answer
Clear selected items on click and prevent function from always executing
I'm trying to use mat-select-autocomplete but I am having some problems with its implementation.
First problem is that the function's (selectionChange) = "getSelectedOptions ($ event)" event is always running each time I click on…
Steve Mc
- 155
- 1
- 9
1
vote
1 answer
How can I get 'valueChanges' event for 'name' formcontrol from addUserInfoFormGroup
In order to use mat-autocomplete on any form control we need to fetch the valueChanges event to that particular form control. My formcontrol is present inside a formGroup which again uses formArray as shown below. I need valueChanges event for…
MuraliMohan
- 11
- 3