title: Angular2 dropdown component scroll into view
body: <p>How to scroll into view the selected element of a dropdown box? I got stuck with this issue. With the angular2 pattern bellow I have no reference to the html li tag. The scroll slider should move after the entry field selected and feed with the down arrow key. What should be the best practice? Has anybody any solution, please?</p>
  
  <pre><code>    import { bootstrap } from 'angular2/platform/browser';
      import { Component, View } from 'angular2/core';
      import { NgFor, FORM_DIRECTIVES, NgClass } from 'angular2/common';
  
      export class Model {
          constructor(public itemId: number, public value: string, public isFocused: boolean) { }
      }
  
      @Component({selector: "app"})
      @View({template: `
          &lt;style&gt;
              .drmenu {position: absolute; z-index: 1000; min-width: 250px; background-color: #fff;
                  border: 1px solid rgba(0,0,0,.15); max-height: 60px; overflow-x: hidden;}
  
              .itemBackground {background-color: red;}
              .selectedItemBackground {background-color: green;}
         &lt;/style&gt;
  
          &lt;div style="position: relative;"&gt;
              &lt;input (keydown)="onKeydown($event)"/&gt;
              &lt;ul class="drmenu"&gt;
                  &lt;li *ngFor="#item of items"&gt;
                      &lt;div [ngClass]="{itemBackground: item.isFocused, selectedItemBackground: !item.isFocused}"&gt;{{item.value}}&lt;/div&gt;            
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          `,
          directives: [NgClass, NgFor]
      })
      class AppComponent {
          items: Array&lt;Model&gt; = [new Model(1, "I1", false), new Model(1, "I2", false), new Model(1, "I3", false), new Model(1, "I4", false), new Model(1, "I5", false), new Model(1, "I6", false)];
  
          private onKeydown(event: KeyboardEvent) {
              var keyCode = event.which || event.keyCode;
              var focusedIndex = this.items.findIndex(i =&gt; i.isFocused);
              switch (keyCode) {
                  case 38:
                      if (focusedIndex &gt; 0) {
                      this.items[focusedIndex].isFocused = false;
                          this.items[focusedIndex - 1].isFocused = true;
                      }
                      break;
                  case 40:
                      if (focusedIndex &lt; this.items.length) {
                          if (focusedIndex &gt; -1) { this.items[focusedIndex].isFocused = false; }
                          this.items[focusedIndex + 1].isFocused = true; }
                      break;
              }
          }
      }
      bootstrap(AppComponent);
  </code></pre>