Example code?

[andreaslarssen]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I followed the readme, and can't get this thing to work.

What I did:

1. Installed the package
2. Imported it in app.module
3. Used the directive like so:

<input hotkeys="meta.a" (hotkey)="handleHotkey($event)" />

4. TS file:

 handleHotkey(event: any) {
    console.log(event);
  }

5. Nothing

Am I misunderstanding something?
Also, I'm not that familiar with the hotkey annotation, it would be good with a section in the docs explaining the different combinations. What's the difference (if any) between meta.a and meta+a?

Expected behavior

An event

Minimal reproduction of the problem with instructions

See above.

What is the motivation / use case for changing the behavior?

Environment

Angular version: ^16.1.0


Browser:
- [x] Chrome (desktop) version 115.0.5790.173
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v16.17.1  
- Platform:  Widows 

Others:

[sysmat]

wtf is meta?

[Jakartoine]

wtf is meta?

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey

[lucas-neto-bairesdev]

Shortcuts in the directive only fire if the host element of the directive is active/in focus, to add a global shortcut, that would match your expectation of usage you should do this:

<input hotkeys="meta.a" (hotkey)="handleHotkey($event)" isGlobal/>

works from version 4.1.0 and forward