Set focus on ul li after ngIf performed

Question

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.

Answer 1

<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

Answer 2

For setting focus on element like div, li etc., you need to set a tabindex attribute for them. Here is how you can set the focus on button click:

Change your component html to this:

<button (click)="showDropDown()">Show</button>
<div *ngIf="toggleDropDown">
  <ul>
    <li #firstLi tabindex="0">...</li>
    <li >...</li>
    <li >...</li>  
  </ul>
</div>

... and in your component class to:

toggleDropDown: boolean = false;
  @ViewChild('firstLi') firstLi:ElementRef;
  public showDropDown(){
      this.toggleDropDown=true
      setTimeout(()=>{
        this.firstLi.nativeElement.focus();
      },10);
  }

---

Here is a working plunker: DEMO

Answer 3

I have updated my solution to use getter/setter. I have add tabindex as mentioned by @Faisal. In template:

<button (click)="showDropDown=true;">Show</button>
<div #container>
<div *ngIf="showDropDown">
  <ul>
    <li tabindex="0" (mousedown)="select">1</li>
    <li (mousedown)="select">2</li>
    <li (mousedown)="select">3</li>
  </ul>
</div>
</div>

And in component:

  private _showDropDown = false;

  get showDropDown () {
    return this._showDropDown;
  }

  set showDropDown (val) {
    this._showDropDown = val;
    this.focusOnFirstLi();
  }

  @ViewChild('container') myDiv;

  focusOnFirstLi () {
     var that = this;
     setTimeout(function () {
       that.myDiv.nativeElement.getElementsByTagName("li")[0].focus();
     }, 10);
  }

https://plnkr.co/edit/Dc3Eh35QX9kiHg3YsSBR?p=info