Skip to content
Angular module to detect OS / Browser / Device
Branch: master
Clone or download
Latest commit 2ae875b Dec 1, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode #74 fixed + breaking changes (ua-device-detector dependency) Dec 1, 2017
test fix: fixes #81 Nov 30, 2018
.travis.yml fix: closes #79 Feb 17, 2018
bower.json chore(release): 5.1.3 Dec 1, 2018
karma.conf.js #74 fixed + breaking changes (ua-device-detector dependency) Dec 1, 2017
ng-device-detector.js fix: fixes #81 Nov 30, 2018
ng-device-detector.min.js #74 fixed + breaking changes (ua-device-detector dependency) Dec 1, 2017
package.json chore: update readme Apr 6, 2018


Angular module to detect OS / Browser / Device

Build Status GitHub issues Known Vulnerabilities Open Source Helpers

GitHub license npm npm npm

Commitizen friendly Semver

Uses user-agent to set CSS classes or directly usable via JS. See website:



$ npm install ng-device-detector --save


$ bower install ng-device-detector --save

Browser (Add scripts in HTML)

<script type="text/javascript" src=".../re-tree.js"></script>
<script type="text/javascript" src=".../ua-device-detector.js"></script>
<script type="text/javascript" src=".../ng-device-detector.js"></script>

Adding 'ng.deviceDetector' to your app module dependencies

angular.module('app', ['ng.deviceDetector']);

Injecting DeviceDetector service in controller

angular.module('app').controller('Home', function($scope, deviceDetector){
  // Awesome stuff

To add classes, add directive like: <div device-detector>


You can set custom detectors at the provider object. The

angular.module('app', ["ng.deviceDetector"])
    .config(['deviceDetectorProvider', function(deviceDetectorProvider) {
      deviceDetectorProvider.addCustom("Custom_UA_Entry", {
        and:["\\bCustom_UA_Entry\\b", {
    .controller('Home', function($scope, deviceDetector) {
      // (true / false)
      $scope.customUAEntry = deviceDetector.custom["Custom_UA_Entry"];

Custom detectors will also be added as CSS classes with 'is-' prefix and encoded into css class name casing.

deviceDetector service

Holds the following properties:

  • raw : object : contains the raw values... for internal use mostly.
  • os : string : name of current OS
  • browser : string : name of current browser
  • device : string : name of current device


At first I added just major browser, OS, device support. With help from mariendries, javierprovecho and crisandretta more support was added. The current list of supported browser, OS, device can be easily viewed in here.

Pull-requests with new stuff will be highly appreciated :)


See plunker


MIT License

You can’t perform that action at this time.