Some reactivity troubleshooting caused me to use services and "NgZone" to bring async tauri functions into angular's scope.

package.json

@@ -10,30 +10,30 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.2.0",
-    "@angular/common": "^15.2.0",
-    "@angular/compiler": "^15.2.0",
-    "@angular/core": "^15.2.0",
-    "@angular/forms": "^15.2.0",
-    "@angular/platform-browser": "^15.2.0",
-    "@angular/platform-browser-dynamic": "^15.2.0",
+    "@angular/animations": "^16.1.4",
+    "@angular/common": "^16.1.4",
+    "@angular/compiler": "^16.1.4",
+    "@angular/core": "^16.1.4",
+    "@angular/forms": "^16.1.4",
+    "@angular/platform-browser": "^16.1.4",
+    "@angular/platform-browser-dynamic": "^16.1.4",
     "@tauri-apps/api": "^1.2.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.12.0"
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.0",
+    "zone.js": "^0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.0",
-    "@angular/cli": "~15.2.0",
-    "@angular/compiler-cli": "^15.2.0",
+    "@angular-devkit/build-angular": "^16.1.4",
+    "@angular/cli": "~16.1.4",
+    "@angular/compiler-cli": "^16.1.4",
     "@tauri-apps/cli": "^1.4.0",
     "@types/jasmine": "~4.3.0",
-    "jasmine-core": "~4.5.0",
+    "jasmine-core": "~5.0.1",
     "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~4.9.4"
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.1.6"
   }
 }

src/app/app.component.html

@@ -13,6 +13,6 @@
   </div>
 
   <input type="checkbox" [(ngModel)]="auto_hide" (change)="toggleAutoHide()">
-  <input type="checkbox" [(ngModel)]="interactable">
+  <input type="checkbox" [(ngModel)]="interactable"><span>{{interactable}}</span>
 
 </div>

src/app/app.component.ts

@@ -1,8 +1,11 @@
 import { AfterViewInit, Component, OnInit } from "@angular/core";
-import { app } from "@tauri-apps/api";
+import { app, tauri } from "@tauri-apps/api";
 import { invoke } from "@tauri-apps/api/tauri";
-import { register } from "@tauri-apps/api/globalShortcut";
+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";
 
 class StateEvent {
   Visible?: any;
@@ -19,25 +22,28 @@ export class AppComponent implements OnInit {
   auto_hide: boolean = true;
   interactable: boolean = false;
 
+  constructor(private shortcuts: ShortcutService, private events: EventsService) { }
+
   ngOnInit(): void {
-    register('F6', () => {
-      this.interactable = !this.interactable;
-      console.log("interactable", this.interactable);
-      invoke("set_interactable", { interactable: this.interactable }).then();
-    }).then();
 
     invoke("set_auto_hide", { auto_hide: this.auto_hide }).then();
 
-    listen('OverlayStateChange', (event: Event<StateEvent>) => {
-      if (event.payload.Interactable) {
-        this.interactable = true;
-        console.log("interactable", this.interactable);
+    this.shortcuts.register('F6').subscribe((s) => {
 
-      } else {
+      if (this.interactable) {
         this.interactable = false;
-        console.log("interactable", this.interactable);
+      } else {
+        this.interactable = true;
       }
-    }).then();
+
+      invoke("set_interactable", { interactable: this.interactable }).then();
+    })
+
+    this.events.listen<StateEvent>("OverlayStateChange").subscribe(event => {
+      this.interactable = event.payload.Interactable != null;
+    })
+
+
   }
 
   toggleAutoHide() {

src/app/services/events.service.ts

@@ -0,0 +1,22 @@
+import { Injectable, NgZone } from '@angular/core';
+import { listen, Event, emit } from '@tauri-apps/api/event';
+import { Observable, from } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EventsService {
+  constructor(private zone: NgZone) { }
+  listen<T>(name: string,): Observable<Event<T>> {
+    return new Observable<Event<T>>((subscriber) => {
+      const unlisten = listen(name, (v: Event<T>) => {
+        this.zone.run(() => subscriber.next(v));
+      });
+      return async () => { (await unlisten)() };
+    });
+  }
+
+  emit<T>(name: string, event: T): Observable<void> {
+    return from(emit(name, event));
+  }
+}

src/app/services/shortcut.service.ts

@@ -0,0 +1,18 @@
+import { Injectable, NgZone } from '@angular/core';
+import { register } from '@tauri-apps/api/globalShortcut';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShortcutService {
+  constructor(private zone: NgZone) { }
+  register(shortcut: string) {
+
+    return new Observable((subscriber) => {
+      register(shortcut, (s) => {
+        this.zone.run(() => subscriber.next(s));
+      })
+    });
+  }
+}