7

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?

CalvT
  • 3,123
  • 6
  • 37
  • 54
code1
  • 8,351
  • 8
  • 27
  • 31

2 Answers2

18

Use control instead of ctrl:

(keydown.control.a)="handleKey($event, item.name)"
FAISAL
  • 33,618
  • 10
  • 97
  • 105
2

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

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

DEMO

Vega
  • 27,856
  • 27
  • 95
  • 103
  • For Chrome at the time of this comment, ctrlKey is set to false even though it's held down when the A is pressed. A real pain. Seems we may have to track the Ctrl key going up and down separately. Then again this is AngularJS 1.27 ng-input. Maybe they fixed it since. – jessewolfe Mar 07 '18 at 22:02
  • Further research revealed that actually the problem was caused by using keyup event, and the developer was doing it fast and raising the ctrl key before raising the A key. Took an hour of testing to figure this out. Switched to KeyDown and life is much better. I think event.ctrlKey is the correct code to use -- not sure if getModifierState is really cross-platform. In fact, i think the above answer is wrong, because if getModifierState is not present, then the logic will fail even if they are typing Ctrl-A. – jessewolfe Mar 10 '18 at 21:10