Adding native-feeling haptics to Angular web apps with ng-haptics

I wanted Angular web apps to feel a bit more “native” on mobile devices, especially when it comes to touch feedback.

So I built a small open-source library called ng-haptics.

It’s a lightweight Angular-first way to add haptic feedback using only native Web APIs.

---

💡 Why this exists

Web apps often feel “flat” compared to native apps.

One missing piece is tactile feedback:

• button presses
• success/error feedback
• interaction confirmation

Native apps solve this with haptics. Web apps usually don’t.

ng-haptics tries to bridge that gap in Angular.

---

⚙️ What it is

A tiny Angular library that provides:

• Standalone APIs
• Declarative directives
• SSR-safe design
• Zero dependencies
• Mobile-first testing

---

🧪 Example usage

<button ngHaptic="light">
  Click me
</button>

---

📱 Demo

👉 https://xaconi.github.io/ng-haptics/

👉 GitHub: https://github.com/Xaconi/ng-haptics

👉 npm: https://www.npmjs.com/package/ng-haptics

---

🎥 Demo video

files.catbox.moe

---

🧠 Notes

This is not a wrapper around Capacitor or native SDKs.

It’s built entirely on top of native Web APIs like:

• navigator.vibrate()
• feature detection
• fallback-safe design

---

🚀 Final thoughts

This started as a weekend experiment, but it turned into a small Angular utility for improving UX in mobile web apps. Huge thanks to Lochie's amazing web-haptics lib, a great inspiration!

Would love feedback from other Angular developers 🙌