In angular2 how to detect Ctrl A key press?

Question

I have a list of items and I am trying to give file traverse behavior like file explorer to the list of items meaning after selecting an item, if you hold shift key and press down arrow those items should get selected.

I have a list as mentioned below.

    <div class="container">
    <ul class="mylist">
    <li  tabindex="1">item1</li>
    <li  tabindex="2">item2</li>
    <li  tabindex="3">item3</li>
    <li tabindex="4">item4</li>
    <li tabindex="5">item5</li>
    <li tabindex="6">item6</li>
    <li tabindex="7">item7</li>
    <li tabindex="8">item8</li>
    <li tabindex="9">item9</li>
    <li tabindex="10">item10</li>
</ul>

If I am using (keydown.ctrl.a)="handleKey($event, item.name)", it's not recognizing ctrl and a button click. How can I achieve this in angular2?

Answer 1

Use control instead of ctrl:

(keydown.control.a)="handleKey($event, item.name)"

Answer 2

Put this in handleKey to detects that Ctrl + a are pressed:

event.getModifierState && event.getModifierState('Control') && event.keyCode===65

DEMO