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

--- title: Adding native-feeling haptics to Angular web apps with ng-haptics published: true description: tags: angular, haptics, oss, vibration # cover_image: https://direct_url_to_image.jpg # Use a ratio of 100:42 for best results. # published_at: 2026-05-14 20:54 +0000 --- # 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 ```html <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 {% embed https://files.catbox.moe/9qanwb.mp4 %} --- ## 🧠 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](https://haptics.lochie.me/) lib, a great inspiration! Would love feedback from other Angular developers 🙌