Adding native-feeling haptics to Angular web apps with ng-haptics I wanted Angular web...

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

<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 lib, a great inspiration!

Would love feedback from other Angular developers 🙌