In angular2 how to detect Ctrl A key press?

7
votes

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?

2
angular
Refer to this: stackoverflow.com/questions/40781064/… - Surender Kherwa

2 Answers

16
votes

Use control instead of ctrl:

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

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

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

DEMO