omridevk / ng-keyboard-shortcuts

Dead Simple Keyboard Shortcuts Management for Angular

Home Page:https://ng-keyboard-shortcuts.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Description of the directive on the front page is wrong

CramericaIndustries opened this issue · comments

The name of the directive is [ngKeyboardShortcuts] rather than [ngKeyboardShortcut]

commented

@CramericaIndustries
Thank you very much for reporting the typo.
I will fix ASAP.
thanks again.

commented

fixed in latest version.
Thank you very much.

commented

@CramericaIndustries
Gotta say I love your nickname and your place of work :).
I named my dog Soda after the episode where George wanted to call their son Seven

There is an other problem in the docs. In the <ng-keyboard-shortcuts-help> example you have that code...

<ng-keyboard-shortcuts-help [key]="'f1'" [closeKey]="'escape'" [title]="Help"></ng-keyboard-shortcut-help>

'Help' is interpreted as a variable instead of a string, so it should be changed to:

<ng-keyboard-shortcuts-help [key]="'f1'" [closeKey]="'escape'" title="Help"></ng-keyboard-shortcut-help>
or
<ng-keyboard-shortcuts-help [key]="'f1'" [closeKey]="'escape'" [title]="'Help'"></ng-keyboard-shortcut-help>

commented

Again nice catch man!!
really appreciate you going through the little details, no sarcasm of course.
Will fix asap,
please let me know if you find any other errors/spelling issues or anything that is wrong in the docs.
Thank you again.

commented

also you may feel free to make a PR if you want, it as easy as editing the file and fixing it :), you don't have to of course :)

Well all I wanted is using your lib. But I had no clue how it works so I went through the docs and I stumbled upon these mistakes in the docs.
Anyhow I wanted to use the <ngKeyboardShortcuts> directive but somehow it doesn't work. I followed your example code but it just doesn't work. No errors thrown. The <ng-keyboard-shortcuts> works fine though.

commented

@CramericaIndustries can you provide an example please? Keep in mind directive is only to be used with input elements, like input, select and textarea

commented

I would really like to improve the docs and your feedback is very welcome

commented

I'll add some dev warnings soon if incorrect usage

I think I found the problem while I was putting together some code to demonstrate the issue.
What I intentionally wanted to do is adding the directive to a button and then when ever I hit the keyboard shortcut it should trigger the button click method.
What I understood is that it only works with focusable input elements, but what I didn't realise was that it would only work while the input element is focused (which makes sense).

Maybe you should put a note saying something like:

Directive that can only be used for focusable elements, such as textarea, select, input, etc...
The shortcut then will only be active while the element is focused.

Also, the example code you are providing for the directive seems to contain code that isn't necessary to demonstrate the directive. I commented the lines that I think are irrelevant but didn't update the imports though.

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from "@angular/core";  
import { ShortcutInput, ShortcutEventOutput, KeyboardShortcutsComponent } from "ng-keyboard-shortcuts";  
  
@Component({  
    selector: 'demo-component',  
    template: "<input [ngKeyboardShortcuts]="shortcuts" />"  
})  
export class DemoComponent implements AfterViewInit {  
  
    shortcuts: ShortcutInput[] = [];  
    // @ViewChild('input') input: ElementRef;  
  
    ngAfterViewInit(): void {  
        this.shortcuts.push({  
            key: "cmd + e",  
            label: "test",  
            description: "hello world",  
            command: () => console.log('directive cmd + e'),  
            preventDefault: true  
        });  
  
        // this.keyboard.select("cmd + f").subscribe(e => console.log(e));  
    }  
  
    // @ViewChild(KeyboardShortcutsComponent) private keyboard: KeyboardShortcutsComponent;  
  
}  
commented

@CramericaIndustries
Thank you for your input, I will update the documents accordingly, and sorry for the hassle it caused it you while using the library.
Hopefully these fixes will improve future users who encountered these issues but didn't report a bug.
again, much appreciated

commented

@CramericaIndustries
fixed in latest version.
Please do let me know if you find any other inconsistencies in the documentation.
Thank you.