feat: add hostlisener binding (#135)

apps/playground/src/app/app.component.ts

@@ -3,7 +3,7 @@ import { MediaMatcher } from "@angular/cdk/layout";
 import {
     KeyboardShortcutsHelpService,
     KeyboardShortcutsSelectService
-} from "@ng-keyboard-shortcuts/ng-keyboard-shortcuts";
+} from "ng-keyboard-shortcuts";
 @Component({
     selector: "ng-keyboard-shortcuts-demo-app",
     templateUrl: "./app.component.html",

apps/playground/src/app/app.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { AppComponent } from "./app.component";
-import { KeyboardShortcutsModule } from "@ng-keyboard-shortcuts/ng-keyboard-shortcuts";
+import { KeyboardShortcutsModule } from "ng-keyboard-shortcuts";
 import { AppRoutingModule } from "./app-routing.module";
 import { GettingStartedComponent } from "./getting-started/getting-started.component";
 import { HomeComponent } from "./home/home.component";

apps/playground/src/app/getting-started/getting-started.component.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
-import { ShortcutInput } from "@ng-keyboard-shortcuts/ng-keyboard-shortcuts";
-import { KeyboardShortcutsComponent } from "@ng-keyboard-shortcuts/ng-keyboard-shortcuts";
+import { ShortcutInput } from "ng-keyboard-shortcuts";
+import { KeyboardShortcutsComponent } from "ng-keyboard-shortcuts";
 import { Subscription } from "rxjs";
 
 @Component({

apps/playground/src/app/home/home.component.ts

@@ -5,7 +5,7 @@ import {
     ShortcutDirectiveInput,
     ShortcutEventOutput,
     ShortcutInput
-} from '@ng-keyboard-shortcuts/ng-keyboard-shortcuts';
+} from 'ng-keyboard-shortcuts';
 
 @Component({
     selector: "app-home",

apps/playground/src/app/nested/nested.component.ts

@@ -1,5 +1,5 @@
-import {Component, OnInit, ChangeDetectionStrategy, AfterViewInit} from '@angular/core';
-import {ShortcutInput} from '@ng-keyboard-shortcuts/ng-keyboard-shortcuts';
+import {Component, OnInit, AfterViewInit, HostListener} from '@angular/core';
+import {ShortcutInput} from 'ng-keyboard-shortcuts';
 
 @Component({
     selector: "ng-keyboard-shortcuts-nested",
@@ -17,6 +17,16 @@ export class NestedComponent implements OnInit, AfterViewInit {
     selectedIndex = 0;
     disabledShortcuts = false;
 
+    @HostListener("shortcut.t k", ['$event'])
+    onShortcut(event) {
+        console.log(event);
+    }
+
+    @HostListener("shortcut.shift + y.prevent")
+    onShift() {
+        console.log("ty")
+    }
+
     ngAfterViewInit() {
         this.shortcuts.push(
             {

docs/docs/host-listener/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "@HostListener",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "@HostListener to bind events"
+  }
+}

docs/docs/host-listener/host-listener.mdx

@@ -0,0 +1,21 @@
+---
+id: host-listener
+title: HostListener to bind events
+sidebar_position: 3
+---
+
+Keyboard shortcuts can also be bind using HostListener in a component
+This is a quick way to add shortcut to your application
+
+Events are defined using the __shortcut__ prefix and then the shortcut
+You can use sequences and combinations.
+
+## Usage
+```typescript
+    import {HostListener} from '@angular/core';
+
+    @HostListener("shortcut.k + t")
+    onShortcut() {
+        console.log("shortcut clicked!!")
+    }
+```