title: how to add event for key left and right in angular2?
body: <p>I have written my code as mentioned below. As of now, the list item is selected only on mouse click. I want to traverse the list even when I press up and down arrow in keyboard. How to achieve this using angular2?</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  export class Hero {
  name: string;
  }
  
  const HEROES: Hero[] = [
  { name: 'STWX1' },
  { name: 'STWX2' },
  { name: 'STWX3' },
  { name: 'STWX4' }
  ];
  
  @Component({
  selector: 'my-app',
  template: `
      &lt;div style="display: inline-block; width = 200px; "&gt;
          &lt;ul class="heroes"&gt;
              &lt;li *ngFor="let hero of heroes" (click)="onSelect(hero)"
                  [class.selected]="hero === selectedHero"&gt;
                   &lt;p&gt;{{hero.name}}&lt;/p&gt;
              &lt;/li&gt;
         &lt;/ul&gt;
     &lt;/div&gt;'
  </code></pre>
  
  <p>,
     styles: [...]
  })</p>
  
  <pre><code>export class AppComponent  {
  name = 'Angular1';
  testRequestId = '3224';
  heroes = HEROES;
  selectedHero: Hero;
  
  goToDivClick() {
      return HEROES;
  }
  
  onSelect(hero: Hero): void {
      this.selectedHero = hero;
  }
  </code></pre>
  
  <p>}</p>