lochie · andrei-shpileuski · Mar 3, 2026
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,20 @@
 .DS_Store
 node_modules
 apps/*/dist
+
+# IDE
+.idea/
+.vscode/
+
+# Package managers
+.pnpm-store/
+.yarn/
+.npm/
+
+# Build artifacts
+dist/
+*.log
+*.tsbuildinfo
+
+# OS
+Thumbs.db
diff --git a/apps/angular-example/CHANGELOG.md b/apps/angular-example/CHANGELOG.md
@@ -0,0 +1,7 @@
+# angular-example
+
+## 0.0.6
+
+### Patch Changes
+
+- Initial Angular example
diff --git a/apps/angular-example/index.html b/apps/angular-example/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Angular Example - Web Haptics</title>
+    <style>
+      body {
+        margin: 0;
+        font-family: system-ui, -apple-system, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <app-root></app-root>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/angular-example/package.json b/apps/angular-example/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "angular-example",
+  "private": true,
+  "version": "0.0.6",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@angular/common": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "rxjs": "^7.8.0",
+    "tslib": "^2.6.0",
+    "web-haptics": "workspace:*",
+    "zone.js": "^0.14.0"
+  },
+  "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^1.0.0",
+    "@angular-devkit/build-angular": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/compiler-cli": "^17.0.0",
+    "typescript": "~5.4.0",
+    "vite": "^7.3.1"
+  }
+}
diff --git a/apps/angular-example/src/app.component.ts b/apps/angular-example/src/app.component.ts
@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+import { injectWebHaptics } from "web-haptics/angular";
+
+@Component({
+  selector: "app-root",
+  standalone: true,
+  template: `
+    <div class="container">
+      <button (click)="haptics.trigger()">Tap me</button>
+    </div>
+  `,
+  styles: `
+    .container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      font-size: 2rem;
+    }
+  `,
+})
+export class AppComponent {
+  haptics = injectWebHaptics();
+}
diff --git a/apps/angular-example/src/main.ts b/apps/angular-example/src/main.ts
@@ -0,0 +1,5 @@
+import "zone.js";
+import { bootstrapApplication } from "@angular/platform-browser";
+import { AppComponent } from "./app.component";
+
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
diff --git a/apps/angular-example/tsconfig.app.json b/apps/angular-example/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ]
+}
diff --git a/apps/angular-example/tsconfig.json b/apps/angular-example/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/angular-example/vite.config.ts b/apps/angular-example/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import angular from "@analogjs/vite-plugin-angular";
+import path from "path";
+
+export default defineConfig({
+  plugins: [
+    angular({
+      tsconfig: path.resolve(__dirname, "tsconfig.app.json"),
+    }),
+  ],
+  resolve: {
+    alias: {
+      "web-haptics/angular": path.resolve(__dirname, "../../packages/web-haptics/dist/angular/index.mjs"),
+    },
+  },
+});
diff --git a/packages/web-haptics/package.json b/packages/web-haptics/package.json
@@ -32,6 +32,11 @@
       "types": "./dist/svelte/index.d.ts",
       "import": "./dist/svelte/index.mjs",
       "require": "./dist/svelte/index.js"
+    },
+    "./angular": {
+      "types": "./dist/angular/index.d.ts",
+      "import": "./dist/angular/index.mjs",
+      "require": "./dist/angular/index.js"
     }
   },
   "publishConfig": {
@@ -54,6 +59,7 @@
     "react",
     "vue",
     "svelte",
+    "angular",
     "typescript"
   ],
   "bugs": {
@@ -71,7 +77,8 @@
     "react": ">=18",
     "react-dom": ">=18",
     "vue": ">=3",
-    "svelte": ">=4"
+    "svelte": ">=4",
+    "@angular/core": ">=17"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -85,6 +92,9 @@
     },
     "svelte": {
       "optional": true
+    },
+    "@angular/core": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -106,6 +116,7 @@
     "svelte": "^4.0.0",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",
-    "vue": "^3.3.0"
+    "vue": "^3.3.0",
+    "@angular/core": "^17.0.0"
   }
 }
diff --git a/packages/web-haptics/src/angular/index.ts b/packages/web-haptics/src/angular/index.ts
@@ -0,0 +1 @@
+export { injectWebHaptics } from "./inject-web-haptics";
diff --git a/packages/web-haptics/src/angular/inject-web-haptics.ts b/packages/web-haptics/src/angular/inject-web-haptics.ts
@@ -0,0 +1,28 @@
+import { inject, DestroyRef, afterNextRender } from "@angular/core";
+import { WebHaptics } from "../lib/web-haptics";
+import type {
+  HapticInput,
+  TriggerOptions,
+  WebHapticsOptions,
+} from "../lib/web-haptics/types";
+
+export function injectWebHaptics(options?: WebHapticsOptions) {
+  const destroyRef = inject(DestroyRef);
+  let instance: WebHaptics | null = null;
+
+  afterNextRender(() => {
+    instance = new WebHaptics(options);
+  });
+
+  destroyRef.onDestroy(() => {
+    instance?.destroy();
+    instance = null;
+  });
+
+  const trigger = (input?: HapticInput, options?: TriggerOptions) =>
+    instance?.trigger(input, options);
+  const cancel = () => instance?.cancel();
+  const isSupported = WebHaptics.isSupported;
+
+  return { trigger, cancel, isSupported };
+}
diff --git a/packages/web-haptics/src/angular/types.ts b/packages/web-haptics/src/angular/types.ts
@@ -0,0 +1,8 @@
+export type {
+  Vibration,
+  HapticPattern,
+  HapticPreset,
+  HapticInput,
+  TriggerOptions,
+  WebHapticsOptions,
+} from "../lib/web-haptics/types";
diff --git a/packages/web-haptics/tsup.config.ts b/packages/web-haptics/tsup.config.ts
@@ -40,4 +40,16 @@ export default defineConfig((options) => [
     external: ["svelte"],
     minify: !options.watch,
   },
+  // Angular
+  {
+    entry: {
+      "angular/index": "src/angular/index.ts",
+    },
+    format: ["cjs", "esm"],
+    dts: true,
+    sourcemap: false,
+    target: "es2022",
+    external: ["@angular/core"],
+    minify: !options.watch,
+  },
 ]);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { injectWebHaptics } from "./inject-web-haptics";