keystrokes (key bindings) for specific elements in angular 2
<p><a href="https://stackoverflow.com/questions/35600685/what-is-angular2-way-of-creating-global-keyboard-shortcuts-a-k-a-hotkeys">what-is-angular2-way-of-creating-global-keyboard-shortcuts</a></p>

<p>Only that im interested in making the shortcuts binded to a specific element (or a container if you will). The shortcut should only work the user focus is in the element or one of his children, and when the element is removed from the dom, the bindings naturally should remove with it.</p>

<p>I have found some way of doing these which I find not very clean:</p>

<pre><code>/**
* Created by Ziv on 5/23/2016.
*/
import {Injectable} from "angular2/core";

@Injectable()
export class KeyBoardService {

public registerKeyStrokeForElemet(
    strKeyStroke: string,
    fnCallBack: () =&gt; void,
    fnIsButtonAvailable: () =&gt; boolean,
    element: any,
    bShouldEffectOnlyInContainer: boolean,
    functionThisContext: any): void {

    // Adding tab index property to the container so the events will be raised only when
    // the container is focused
    jQuery(element).prop("tabindex", 1);

    jQuery(element).css("outline", "none");

    jQuery(element).bind(
        'keystrokes', {
            keys: [strKeyStroke]
        }, (e) =&gt; {
            // Checking if this event should only happen when the div container is focused
            if (!bShouldEffectOnlyInContainer || jQuery(e.target).is("div")) {
                if (typeof fnIsButtonAvailable !== "function" || fnIsButtonAvailable.apply(functionThisContext, event)) {
                    e.preventDefault();

                    fnCallBack.apply(functionThisContext);
                }
            }
        }
    );

    // If the event should effect all the elements inside the container too,
    // there is a special case when events in jquery keystroke library ignored text inputs.
    // the solution offered by the libraray author is to assign thoose events to them inputs
    // explicitly, which is what were gonna do next
    if (!bShouldEffectOnlyInContainer)
    {
        jQuery(element).find(
                "textarea, :text"
            ).bind(
            'keystrokes',
            {
                keys: [strKeyStroke]
            },
            (e) =&gt; {
                if (typeof fnIsButtonAvailable === "function" || fnIsButtonAvailable.apply(functionThisContext, event)) {
                    e.preventDefault();

                    fnCallBack.apply(functionThisContext);
                }
            }
        );
    }
}

}
</code></pre>

<p>It relies on using jquery-keystrokes <a href="https://github.com/jboesch/Keystrokes" rel="nofollow noreferrer">jquery keystrokes</a>
Which is a bit old, and generally I find using to much jquery in an angular 2 app pretty dirty, so I am looking for the "angular way" to achieve this</p>