title: Navigating a multi list using up/down arrow key using Angular 8
body: <p>I have been trying to build a autocomplete using several "ul". Those list item should be navigable using up/down arrow key, but not sure what would be the best way to achieve that using Angular. I tried some work around with *ngFor, but that works for only one "ul" with "li". Here is the stackblitz with my code, but it has has some issue.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-urnur5" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-urnur5</a></p>
  
  <pre><code>//Code to handle navigation
  navigateUsingKey(event) {
        switch (event.keyCode) {
            case 38: // this is the ascii of arrow up
                      this.linkIndex--;
                    break;
            case 40: // this is the ascii of arrow down
                      this.linkIndex++;
                    break;
  
        }
    }
  </code></pre>
  
  <p>Here is the html for the same.</p>
  
  <pre><code>&lt;input (keyup)="navigateUsingKey($event)"/&gt;
  &lt;div&gt;
    &lt;h4&gt;Fruit&lt;/h4&gt;
    &lt;ul&gt;
      &lt;li *ngFor="let item of list1; let i = index;" [class.activeSearchLink]="i === linkIndex"&gt; {{item.name}}&lt;/li&gt;
    &lt;/ul&gt;
    &lt;h4&gt;Vegie&lt;/h4&gt;
    &lt;ul&gt;
      &lt;li *ngFor="let item of list2; let i = index;" [class.activeSearchLink]="i === linkIndex"&gt; {{item.name}}&lt;/li&gt;
    &lt;/ul&gt;
    &lt;h4&gt;Phone&lt;/h4&gt;
    &lt;ul&gt;
      &lt;li *ngFor="let item of list3; let i = index;" [class.activeSearchLink]="i === linkIndex"&gt; {{item.name}}&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>