How do you call closePanel in angular 4 autoComplete material

Question

import { MdAutocomplete } from '@angular/material';

@Component({
 template:'
             <input type="text" [mdAutocomplete]="auto"/>
             <md-autocomplete #auto="mdAutocomplete" #autoComplete>
             <md-option>
               Some Options
             </md-option>
          </md-autocomplete>'
})

export class AutoComplete {
 @ViewChild('autoComplete') autoComplete: MdAutocomplete;

 closeAuto() {
   this.autoComplete.closePanel();
 }
}

It is not the complete code but the idea is to call closePanel inside a method. closePanel is listed as a method on https://material.angular.io/components/autocomplete/api but it fails to work. It says method not found.

tried this approach too

import { MdAutocompleteTrigger } from '@angular/material';

@Component({
 template:'
             <input #autoCompleteInput type="text" [mdAutocomplete]="auto"/>
             <md-autocomplete #auto="mdAutocomplete" #autoComplete>
             <md-option>
               Some Options
             </md-option>
          </md-autocomplete>'
})

export class AutoComplete {
 @ViewChild('autoCompleteInput') autoComplete: MdAutocompleteTrigger;

 closeAuto() {
   this.autoComplete.closePanel();
 }
}

I've been running into a lot of methods and inputs that don't seem to be connected. I'd suggest opening an issue on the github repo https://github.com/angular/material2/issues — Z. Bagley, Jul 22 '17 at 18:31

yurzui · Accepted Answer · 2017-12-08T04:49:10.793

31

Angular reads ElementRef by default from html element if you don't specify read option.

So

template

<input #autoCompleteInput type="text" [matAutocomplete]="auto"/>

component

@ViewChild('autoCompleteInput', { read: MatAutocompleteTrigger }) 
autoComplete: MatAutocompleteTrigger;

Here is the Plunker Example that demonstrates this approach.

edited Dec 08 '17 at 04:49

answered Jul 23 '17 at 07:27

yurzui

205,937
32
433
399

1

Explanation of the `read` property from Günter Zöchbauer [here](https://stackoverflow.com/a/37476195/968003). Basically, we strongly type an element, which otherwise would have appeared as `ElementRef ` – Alex Klaus Oct 05 '17 at 07:17
Just note MdAutocompleteTrigger is now MatAutocompleteTrigger. – Chris Curnow Dec 07 '17 at 22:58
This also helped me when targeting a component to make the dropdown open on focus: `this.autoComplete._onChange(''); this.autoComplete.openPanel();` – Red3 Feb 08 '18 at 18:37
2

If you use multiple autocompletes with the same tag use `@ViewChildren(MatAutocompleteTrigger) autoComplete: QueryList;` and loop it. I use **id** of **input** to match. `if (this.autoComplete['_results'][i]['_element']['nativeElement']['id'] === _fieldid) {` – Swoox Feb 22 '18 at 12:57
6

Great answer. Although the Angular docs mention this method, there is no example of how to use it. This is a common problem with Angular docs, in general. – Charles Robertson Dec 15 '18 at 19:07
If you have a just 2 autocompletes on your view, the easier method is to call "first" and "last" methods on the QueryList to get a reference to the panel. "this.autocomplete.last.closePanel();" – Darren Street Dec 08 '20 at 10:46

How do you call closePanel in angular 4 autoComplete material

1 Answers1

Linked