ngx-device-detector

ngx-device-detector is an Angular library that identifies a visitor’s device type, operating system, browser, and orientation directly from the user agent string. It exposes an injectable DeviceDetectorService built on Angular signals, so consuming components can read a computed deviceInfo() signal reactively instead of manually parsing navigator.userAgent with a general-purpose UA parser.

The library ships as an Ivy-compatible Angular package with a documented SSR pattern for injecting the Express request’s user-agent header on the server, so device detection works consistently in both Angular Universal and browser-only apps. It has tracked every major Angular release since Angular 5, publishing a dedicated compatible version range for each Angular major up through Angular 22.

What You Get

• Injectable DeviceDetectorService with a reactive deviceInfo Signal exposing os, browser, device, os_version, browser_version, deviceType, orientation, and isDesktopMode
• Boolean helper methods isMobile(), isTablet(), isDesktop(), and isDesktopModeEnabled() for direct conditional checks in components
• Regex-based device/OS/browser matching via a bundled ReTree engine, covering phones, tablets, and desktop browsers without pulling in an external UA-parsing dependency
• A documented SSR pattern (UniversalDeviceDetectorService) for providing the request’s user-agent header so detection works correctly during Angular Universal server-side rendering
• Published compodoc API reference and a live demo app maintained alongside the library

Common Use Cases

• Conditionally rendering a mobile-optimized layout or component tree when isMobile() or isTablet() returns true
• Adapting UI copy or CTAs based on the isDesktopModeEnabled() check for tablets/phones requesting the desktop site
• Feeding analytics or logging pipelines with structured device/browser/OS data instead of raw user-agent strings
• Wiring an Angular Universal app’s Express request user-agent into the service so server-rendered markup already reflects device-specific styling before hydration

Under The Hood

Architecture The library is a small, single-purpose surface: public-api.ts re-exports one injectable service (DeviceDetectorService), a constants module (device-detector.constants.ts) holding the OS/browser/device regex tables, and a standalone ReTree class (retree.ts) that evaluates those patterns (including composite and/or/not regex trees) with an internal RegExp cache. DeviceDetectorService owns Angular-signal state internally (_os, _browser, _device, etc.) and derives a single computed deviceInfo Signal from them; setDeviceInfo() re-runs detectFromMapping() against the constants tables on demand, and isMobile()/isTablet()/isDesktop() compose off the same state. There’s no dependency-injection layering beyond Angular’s own injector (PLATFORM_ID) — if ReTree’s matching semantics changed, every detection path breaks since it’s the sole regex-evaluation primitive the service relies on.

Tech Stack Built and packaged for Angular 22 with ng-packagr producing an Ivy-compatible distributable, targeting TypeScript 6 in strict mode. Tooling is current: ESLint 10 with typescript-eslint and angular-eslint, Prettier 3 for formatting, Vitest alongside Angular’s TestBed/@angular/core/testing for unit tests, husky + commitlint for conventional-commit enforcement, compodoc for generated API docs, and conventional-changelog for release notes. The published npm package tracks each Angular major with a pinned compatible version range, and the demo app deploys to GitHub Pages via peaceiris/actions-gh-pages.

Code Quality 35 test cases in device-detector.service.spec.ts exercise OS, browser, device, orientation, and desktop-mode detection against a wide range of real user-agent strings (iPhone, iPad, Android variants, desktop browsers). Public types are explicit (DeviceInfo interface, DeviceType/OrientationType enums) rather than loosely typed. detectFromMapping() falls back to explicit UNKNOWN constants instead of throwing or silently returning undefined. CI (GitHub Actions) runs lint, test, and build on every pull request and on pushes to master, so regressions in either linting or test coverage block merges.

API Design The public surface is small and idiomatic for Angular: a single providedIn: ‘root’ injectable exposing one computed deviceInfo Signal plus individual per-field signal getters (browser, os, device, etc.) and four boolean helper methods. Getting started requires no configuration — just injecting DeviceDetectorService and reading deviceInfo() or calling isMobile()/isTablet()/isDesktop(). The one piece of unavoidable boilerplate is SSR: consumers must subclass DeviceDetectorService (UniversalDeviceDetectorService) and call the protected setDeviceInfo() themselves with the server’s user-agent header — a pattern documented in the README but not automated by the library. The core technique (regex-based UA matching) is standard and shared with many UA-parsing libraries; the library’s real differentiator is being idiomatically Angular-native rather than algorithmically novel, plus a purpose-built desktop-mode heuristic — combining touch support, screen-size heuristics, mobile browser signature regexes, and orientation/motion API presence — that flags phones or tablets requesting a desktop site, a case plain UA-parsing libraries don’t address.