title: Angular2 Navigation using Arrow Keys
body: <p>I am working on a Angular2 project in which I have a list of items and clicking any item display its details page using item details component. I am trying to find a way to allow users to navigate the items using right and left arrow keys.</p>
  
  <p>So, I have a list of items and when for example user click the first item in the list it shows item details, what I want now is that when user press right arrow key it should automatically load the details of the next item in the list.</p>
  
  <p>I have two components ItemsListComponent and ItemDetailsComponent each with its own route, ItemDetailsComponent has a parameter id. And I have list of items stored in a ItemsService.</p>
  
  <p>I have two buttons in ItemDetails component to display Next and Previous item each bind to showNext(id), and showPrevious(id) functions on same component.</p>
  
  <p>Everything works fine, but I am unable to link the Right/Left arrow KeyPress event to the showNext(id) and showPrevious(id) functions.</p>
  
  <p>I thought of one approach which is add an event listener using addEventListener on document, in the component constructor but this doesnt seems to be an elegant solution.</p>
  
  <p>Any help related to this would be highly appreciated.</p>
  
  <p>PS: I am not using jQuery so looking for a pure Angular2 solution</p>