title: Angular 4 focus on item on arrow down and scroll
body: <p>I have items in the div *ngFor loop which applies css class 'message-list-active' on the selected message.</p>
  
  <p>app.html</p>
  
  <pre><code> &lt;div  id="listText" *ngFor="let message of messages; let i=index" activeIndex = i" 
     [ngClass]="{'message-list-active': activeIndex === i  }"&gt;
        {{message.name}}
   &lt;/div&gt;
  </code></pre>
  
  <p>component.ts //listen for keyboard event using arrow up and down to select message</p>
  
  <pre><code>  messages;  // we have date stored here
    activeIndex = 0;
  
  
    @HostListener("document:keydown", ['$event']) 
     doSomething(event: KeyboardEvent): void {
  
  
    if (event.code == "ArrowUp" &amp;&amp; this.activeIndex &gt; 0) {
      this.activeIndex--
  
     }
    if (event.code == "ArrowDown" &amp;&amp; this.activeIndex &lt; this.messages.length-1) {
      this.activeIndex++
  
    }
   }
  </code></pre>
  
  <p>app.css</p>
  
  <pre><code>    #listText {
          width: auto;
          height:100%;
          overflow: auto
        }
  
       .message-list-active {
          margin: 0;
          padding: 15px 15px 5px 13px;
          border-radius: 0;
          background-color: #CDE6F7;
          border-style: dotted;
          border-width: 1px;
          border-bottom: 1px dotted;
           }
  </code></pre>
  
  <p>And the problem is when selected message comes to the end of the list it will not scroll. So what I am trying to achieve is to have the selected item always focused and be able to scroll down and up:</p>
  
  <p>Also similar example here:</p>
  
  <p><a href="https://i.stack.imgur.com/bMqAN.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/bMqAN.jpg" alt="enter image description here"></a></p>
  
  <p>Here is what I am trying to achieve this was answered using jquery jsfiddle <a href="http://jsfiddle.net/38zR3/42/" rel="noreferrer">http://jsfiddle.net/38zR3/42/</a>, <a href="https://stackoverflow.com/questions/15929117/focus-on-list-item-on-down-arrow-press">similar question/answer</a> but how can I achieve this in Angular 4 using typescript</p>