有没有一种方法可以检测是否显示了md-autocomplete material2 + angular2上的选择面板？

Question

I am trying to detect if the panel is being shown or not but from the documentations, I can't seem to figure out what to use that will correctly tell me which property would trigger the right event.

If anyone can help, thanks.

Answer 1

md-autocomplete has a property called showPanel . You can return the value of showPanel using the # reference of autocomplete.

Here's an example, for every keyup event in the input field, I check the value of showPanel and push it to an array for verifying if it works.

html:

<md-input-container>
  <input mdInput placeholder="State" 
         [mdAutocomplete]="auto" 
         [formControl]="stateCtrl"
         (keyup)="checkPanel(auto.showPanel)">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state }}
  </md-option>
</md-autocomplete>

<p></p>

<div style="margin-top: 300px">
  <span>Is panel open at keyup:</span>
  <div *ngFor="let x of flags; let i = index">
    keyup {{i+1}}: {{x}}
  </div>
</div> 

ts:

checkPanel(val){
  this.flags.push(val);
}

Plunker demo