I'm working with Angular Material's matAutocomplete component, and according to the docs, there is a method which can open/close an autocomplete panel with a openPanel()/closePanel() method. Any suggestion to how can I integrate it into already working example?
Here is a what I did with live example while trying to implement the feature.
Open matAutocomplete with open openPanel() method Show activity on this post. I'm working with Angular Material's matAutocomplete component, and according to the docs, there is a method which can open/close an autocomplete panel with a openPanel()/closePanel() method.
Simple autocompleteStart by creating the autocomplete panel and the options displayed inside it. Each option should be defined by a mat-option tag. Set each option's value property to whatever you'd like the value of the text input to be when that option is selected.
Answers 1 : of How to clear mat- autocomplete when no option is selected from autocomplete dropdown. You can remove the formControl-binding from your input and when you select an option you set that id to your form.
The Material documentation should be clearer. Whilst there are various gymnastic routines you can do to achieve this functionality (like manipulating the document object, using @ViewChild, or creating event listeners), for me it boils down to the two following ways:
<mat-form-field>
<input #nameInput
matInput
formControlName="name"
#trigger="matAutocompleteTrigger"
[matAutocomplete]="autoName">
<mat-autocomplete #autoName="matAutocomplete">
<mat-option *ngFor="let o of suggestionOpts"
[value]="o"
(click)="$event.stopPropagation(); trigger.openPanel()">{{o}}</mat-option>
</mat-autocomplete>
</mat-form-field>
Here we're attaching the MatAutoCompleteTrigger
directive to the input and assigning it to a variable named trigger
. This trigger directive is passed to the click method on each mat-option
, which fires every time an option is selected from the menu. The directive contains two pertinent methods. Here we call openPanel
. We call stopPropagation
on the $event
object to prevent the native methods doing anything unexpected.
.html
<mat-form-field>
<input #nameInput
matInput
formControlName="name"
#trigger="matAutocompleteTrigger"
[matAutocomplete]="autoName">
<mat-autocomplete #autoName="matAutocomplete">
<mat-option *ngFor="let o of suggestionOpts"
[value]="o"
(click)="selectionMade($event, trigger)">{{o}}</mat-option>
</mat-autocomplete>
</mat-form-field>
.ts
import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
...
selectionMade(event: Event, trigger: MatAutocompleteTrigger) {
event.stopPropagation();
trigger.openPanel();
}
Here we're passing the directive and event object to a function in the component's .ts file, and performing exactly the same logic as the first approach. If blanket separation of concerns is a concern, do things this way. For small jobs like this I prefer the minimalist approach, but each unto their own, I guess.
in template
<button (click)='openPanel($event)'>Open</button>
<input #inputAutoComplete>
in ts
@ViewChild(MatAutocompleteTrigger, {read: MatAutocompleteTrigger}) inputAutoComplete: MatAutocompleteTrigger;
openPanel(evt): void {
evt.stopPropagation();
this.inputAutoComplete.openPanel();
}
Please add stopPropagation or defer the openPanel using setTimeout as follows.
Because at button click end focus changes from input field back to ur button so autocomplete is hiding immediately
Option 1: Stop Propagatioan
<button (click)="openAutocomplete($event)">toggle autocomplete (1 way)</button>
...
openAutocomplete(evt) {
evt.stopPropagation()
this.autoTrigger.openPanel();
}
Option 2 - SetTimeout
openAutocomplete() {
setTimeout(() => {
this.autoTrigger.openPanel();
}, 0)
}
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