title: Angular2 Templates: How to bind keydown.arrow to whole div instead of only control elements?
body: <p>I have a simple navigator component with some buttons and a date-picker subcomponent. Now the idea is, that I can bind <code>keydown.arrowleft</code> etc. for the whole div (which has css style of 100% height and width). It's template looks like this:</p>
  
  <pre><code>&lt;div id="ck-navigator" (keydown.arrowleft)="decrementDate(); 
      $event.preventDefault()" (keydown.arrowright)="incrementDate(); 
  $event.preventDefault()"&gt;
      &lt;button (click)="decrementDate()" class="fa fa-2x fa-chevron-left"&gt;
      &lt;/button&gt;
      &lt;ck-date-picker [date]="date" (dateChange)="changeDate($event)"&gt;
      &lt;/ck-date-picker&gt;
      &lt;button (click)="incrementDate()" class="fa fa-2x fa-chevron-right"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't show the component code, it does not matter for this question (afaik).
  This is working, but only if I actively select a button or the date-picker in advance (aka a control element). Is there a possibility to extend the keybinding to the whole div (i.e. if I just click somewhere on the site). Sorry for my lack of understanding the DOM and thanks for any push in the right direction.</p>