Set focus on ul li after ngIf performed

user_1948328 0
Viewed 6563

I have div with <ul> and <li> that show after ngIf performed as below:

<input type="text" />
<button (click)="ShowDropDown=true;">Show</button>
<div *ngIf="ShowDropDown">
  <ul>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
  </ul>
</div>

I need to set focus on the very first element of <li> after clicking on the Show button.

angular
3 Answers
<input type="text" #myInput />
<button (click)="ShowDropDown=true;">Show</button>
<div *ngIf="ShowDropDown">
  {{ myInput.focus() }}
  <ul>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
  </ul>
</div>

put attention on {{ myInput.focus() }} inside ngIf and #myInput inside the input

user_41859120
Related