title: Directive to traverse a dropdown list using keyboard arrows
body: <p>I have a bootstrap dropdown as follows:</p>
  
  <pre><code> &lt;span class="dropdown"&gt;
     &lt;button class="dropdown-toggle" data-toggle="dropdown"&gt;Boot Dropdown
      &lt;span class="caret"&gt;&lt;/span&gt;
     &lt;/button&gt;
     &lt;ul class="dropdown-menu"&gt;
      &lt;li keyArrows *ngFor="let option of listOptions [class.select]="listOption==option" (click)="listOption=option"&gt;{{option.title}}&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/span&gt;
  </code></pre>
  
  <p>When I hit enter, the dropdown opens, but I cannot traverse through the items in the list with keyboard up and down arrows. I would like to implement that using an Angular 2 directive.</p>
  
  <p>I did the following:</p>
  
  <pre><code>import { Directive, ElementRef, OnDestroy } from "@angular/core";
  
  @Directive({
      selector: "[keyArrows]"
  })
  export class KeyArrows implements OnDestroy {
      private arrows;
      constructor(el: ElementRef) {
          this.arrows = function (event) {
             switch(event.which){
                 case 37: //left
                 console.log("Left arrow triggered");
                 break;
  
                 case 38: //up
                  var target = $(event.target).prev();
                  $(target).trigger('focus');
                 console.log("Up arrow triggered");
                 break;
  
                 case 39: //right
                 console.log("right arrow triggered");
                 break;
  
                 case 40: //down
                 var target = $(event.target).next();
                 $(target).trigger('focus');
                 console.log("down arrow triggered");
                 break;
  
                 default: return; //exit handler for other keys
             }
  
             event.preventDefault();
          }
          document.addEventListener('keydown', this.arrows, false);
      }
  
      ngOnDestroy() {
          document.removeEventListener('keydown', this.arrows, false);
      }
  }   
  </code></pre>
  
  <p>Currently, the directive doesn't work as I am missing something crucial in this which I am unable to figure out.</p>
  
  <p>I was wondering if someone could help me out with their expertise on how to achieve this kind of a task or point me in a right direction or comment on whatever I have written here.</p>
  
  <p>Thank you.    </p>