I am currently working on a simple navigator component that includes buttons and a date-picker subcomponent. My goal is to be able to bind keydown.arrowleft etc. for the entire div, which has a CSS style of 100% height and width. Below is the template structure:
<div id="ck-navigator" (keydown.arrowleft)="decrementDate();
$event.preventDefault()" (keydown.arrowright)="incrementDate();
$event.preventDefault()">
<button (click)="decrementDate()" class="fa fa-2x fa-chevron-left">
</button>
<ck-date-picker [date]="date" (dateChange)="changeDate($event)">
</ck-date-picker>
<button (click)="incrementDate()" class="fa fa-2x fa-chevron-right"></button>
</div>
The actual code of the component is not relevant to this question. The keybindings work when I actively select a button or the date-picker beforehand. Is there a way to extend the keybinding to cover the entire div (i.e., even if I just click anywhere on the site)? I appreciate any guidance in understanding the DOM better. Thank you.