What do you call closePanel in angular 4 autofill stuff

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();
 }
}

This is not complete code, but the idea is to call the closePanel method inside the method. closePanel is listed as a method https://material.angular.io/components/autocomplete/api , but it does not work. He says that the method was not found.

also tried this approach

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();
 }
}

Answer 1

Angular reads ElementRefby default from the html element if you did not specify an option read.

So,

template

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

component

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

Here is a Plunker Example that demonstrates this approach.