Testing keydown/keyup events for keyboard shortcut rebinding

src/app/app.component.html

@@ -14,5 +14,8 @@
 
   <input type="checkbox" [(ngModel)]="auto_hide" (change)="toggleAutoHide()">
   <input type="checkbox" [(ngModel)]="interactable"><span>{{interactable}}</span>
-
+  <input type="checkbox" [(ngModel)]="test">
+  <ng-container *ngIf="test">
+    <span RecordKeyChord></span>
+  </ng-container>
 </div>

src/app/app.component.ts

@@ -1,9 +1,5 @@
-import { AfterViewInit, Component, OnInit } from "@angular/core";
-import { app, tauri } from "@tauri-apps/api";
+import { Component, Directive, HostListener, OnInit } from "@angular/core";
 import { invoke } from "@tauri-apps/api/tauri";
-import { ShortcutHandler, register } from "@tauri-apps/api/globalShortcut";
-import { Event, listen } from '@tauri-apps/api/event';
-import { Observable, Subscriber, from } from "rxjs";
 import { ShortcutService } from "./services/shortcut.service";
 import { EventsService } from "./services/events.service";
 
@@ -21,15 +17,14 @@ class StateEvent {
 export class AppComponent implements OnInit {
   auto_hide: boolean = true;
   interactable: boolean = false;
+  test: boolean = false;
 
   constructor(private shortcuts: ShortcutService, private events: EventsService) { }
 
   ngOnInit(): void {
-
     invoke("set_auto_hide", { auto_hide: this.auto_hide }).then();
 
     this.shortcuts.register('F6').subscribe((s) => {
-
       if (this.interactable) {
         this.interactable = false;
       } else {
@@ -42,13 +37,10 @@ export class AppComponent implements OnInit {
     this.events.listen<StateEvent>("OverlayStateChange").subscribe(event => {
       this.interactable = event.payload.Interactable != null;
     })
-
-
   }
 
   toggleAutoHide() {
     console.log("toggle auto hide!!");
     invoke("set_auto_hide", { autoHide: this.auto_hide }).then();
   }
-
 }

src/app/app.module.ts

@@ -3,9 +3,10 @@ import { BrowserModule } from "@angular/platform-browser";
 
 import { AppComponent } from "./app.component";
 import { FormsModule } from "@angular/forms";
+import { RecordKeyChord } from "./directives/record-key-chord.directive";
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, RecordKeyChord],
   imports: [BrowserModule, FormsModule],
   providers: [],
   bootstrap: [AppComponent],

src/app/directives/record-key-chord.directive.ts

@@ -0,0 +1,20 @@
+
+import { Directive, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[RecordKeyChord]'
+})
+export class RecordKeyChord {
+  @Input('enable') enable: boolean = false;
+
+  @HostListener('window:keydown', ['$event'])
+  handleKeyDown(event: KeyboardEvent) {
+    console.log("keydown:", event);
+  }
+
+  @HostListener('window:keyup', ['$event'])
+  handleKeyUp(event: KeyboardEvent) {
+    console.log("keydown:", event);
+  }
+
+}

src/app/services/keybind-manager.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KeybindManagerService {
+  constructor() { }
+  
+}

src/app/services/shortcut.service.ts

@@ -14,5 +14,6 @@ export class ShortcutService {
         this.zone.run(() => subscriber.next(s));
       })
     });
+    
   }
 }