Reopen Angular Material autocomplete on clear -

i have input instructorcontrol = new formcontrol(); autocomplete. autocompelte subscribes this.instructorcontrol.valuechanges. when suggestion autocomplete selected or add button clicked, current input value pushed array , input cleared this.instructorcontrol.patchvalue('');.

when autocomplete option selected, autocomplete options menu not opened again. that, either have type in or refocus input.

how can make autocomplete reopen, when suggestion selected?

see plunker

app.component.html

  <button md-button (click)="addinstructor()">add</button>   <md-input-container fxflex>     <input mdinput name="instructor" placeholder="instructor" (keydown.enter)="addinstructor()" [mdautocomplete]="instructorsauto" [formcontrol]="instructorcontrol">   </md-input-container>     <md-autocomplete #instructorsauto="mdautocomplete">     <md-option *ngfor="let instructor of filteredinstructors | async" [value]="instructor" (click)="addinstructor()">       {{ instructor }}     </md-option>   </md-autocomplete>    {{instructors | json}} 

app.component.ts

  instructors: string[] = [];   instructorcontrol = new formcontrol();   filteredinstructors: observable<string[]>;   allinstructors = ['max', 'tirrell'];;   instructorsauto;    ngoninit() {     this.filteredinstructors = this.instructorcontrol.valuechanges       .startwith('')       .map(value => this.filterinstructors(value));   }    addinstructor() {     const instructor: string = this.instructorcontrol.value;     if (instructor) {       this.instructors.push(instructor);       this.instructorcontrol.patchvalue('');     }   }    private filterinstructors(value: string = ''): string[] {     return this.allinstructors.filter(instructor => new regexp(`${value}`, 'gi').test(instructor)); 

my suggestion using @viewchild decorator hold of mdautocompletetrigger instance , fire openpanel() method on it.

in order this:

1) add template reference variable input[autocomplete] element:

<input #trigger ...        [mdautocomplete]="instructorsauto"        [formcontrol]="instructorcontrol"> 

2) declare decorated @viewchild property.

import { mdautocompletetrigger } '@angular/material' ... @viewchild('trigger', { read: mdautocompletetrigger }) trigger: mdautocompletetrigger;                         ^^^^^^^^^^^^^^^^^^^^^^^^^          make sure you're getting right instance template reference 

3) use in addinstructor method:

this.trigger.openpanel(); 

plunker example