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
🎥 Demo video
🧠 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 🙌