Detect OS, browser and device in AngularJS

September 21, 2015
by Rahil Shaikh

In this lesson we will see how we can gracefully detect the Operating System, browser and device used by our user to browse our website.

Detecting browser is usually a bad smell and means that you are getting your hands dirty, however there are genuine cases where this can’t be avoided.
Detecting OS can be sometimes very important for example, if you are providing a download package or a software to your users, you would want to point them to the appropriate version depending on the OS.

Usually detecting these entities involves a bit of dirty JavaScript work, matching regex etc. but here we will be using an AngularJS library known as “ng-device-detector”, which will reduce our work significantly. It will tell us the os version and the browser version as well.




ngDeviceDetector is a library under the user name srfrnk, licensed as MIT. This library will help us detect the OS, browser and device in our AngularJS application with ease.

View on Github.


First thing you need to do is, grab the files required to detect our entities.  There are a couple of ways to do so.


$ bower install ng-device-detector

OR you can get them from the below links.

re-tree is a library that servers as regular expression engine. This library is required by ng-device-detector.

Include these two files into your app after angular.js.

<script type=”text/javascript” src=”bower_components/angular/angular.js”></script>

<script type=”text/javascript” src=”bower_components/ng-device-detector/ng-device-detector.min.js”></script>

<script type=”text/javascript” src=”bower_components/re-tree/re-tree.min.js”></script>

<script type=”text/javascript” src=”app/app.js”></script>

app.js is our script file for the demo.

Next in your angular module inject ‘ng.deviceDetector‘ as a dependency to our app.


ng.deviceDetector provides us with ‘deviceDetector‘ service. Inject this into your controller. This service will contain all the data we would require to detect our entities.

Demo App

Lets have a look at the demo app.

    var vm = this; = deviceDetector;
    vm.allData = JSON.stringify(, null, 2);
    <body ng-app="myApp">
        <div ng-controller="myCtrl as vm">
            <p>You are using <b>{{}}</b> on <b>{{}} ({{}})</b>.</p>
            <p>Your <b>{{}}</b> version is <b>{{}}</b></p>
            <p>Device - <b></b>{{}}</p>
            <p>Complete deviceDetector data - <b></b><pre>{{vm.allData}}<pre></p>
    <script type="text/javascript" src="bower_components/angular/angular.js"></script>
    <script type="text/javascript" src="bower_components/ng-device-detector/ng-device-detector.min.js"></script>
    <script type="text/javascript" src="bower_components/re-tree/re-tree.min.js"></script>
    <script type="text/javascript" src="app/app.js"></script>


As you can see above in the code.

  • os – Gives us the operating system of the user.
  • browser – Gives us the browser of the user.
  • device – Gives us the device of the user.
  • os_version – Gives us the OS version.
  • browser_version – Gives us the browser version.

Below is the complete data provided by the deviceDetector service for your reference.

deviceDetector json object
  "raw": {
    "userAgent": "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36",
    "os": {
      "windows": true,
      "mac": false,
      "ios": false,
      "android": false,
      "linux": false,
      "unix": false,
      "firefox-os": false,
      "chrome-os": false,
      "windows-phone": false,
      "ps4": false,
      "vita": false,
      "unknown": false
    "browser": {
      "chrome": true,
      "firefox": false,
      "safari": true,
      "opera": false,
      "ie": false,
      "ms-edge": false,
      "ps4": false,
      "vita": false,
      "unknown": false
    "device": {
      "android": false,
      "ipad": false,
      "iphone": false,
      "ipod": false,
      "blackberry": false,
      "firefox-os": false,
      "chrome-book": false,
      "windows-phone": false,
      "ps4": false,
      "vita": false,
      "unknown": false
    "os_version": {
      "windows-3-11": false,
      "windows-95": false,
      "windows-me": false,
      "windows-98": false,
      "windows-ce": false,
      "windows-2000": false,
      "windows-xp": false,
      "windows-server-2003": false,
      "windows-vista": false,
      "windows-7": false,
      "windows-8-1": false,
      "windows-8": false,
      "windows-10": true,
      "windows-phone-7-5": false,
      "windows-phone-10": false,
      "windows-nt-4-0": false,
      "unknown": false
  "os": "windows",
  "browser": "chrome",
  "device": "unknown",
  "os_version": "windows-10",
  "browser_version": "45.0.2454.93"



Detecting entities such as os, browser and device can turn out to be a pain, this post showed us how we can achieve it in our angular applications with ease.


Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:


  1. Prabodh

    I want to Check Which Office Version is installed on Client PC using, Angular

    • |

      I believe it won’t be possible using only javascript, you might have to use some thing like ActiveX or some other browser plugin that serves that purpose.

  2. primerproyecto

    Well done …nice and easy.

  3. |

    I check the URL “ ” on device but its not showing the OS Version on device its showing only browser version.

    • |

      I just checked it does show the OS. You can find that in the complete JSON data that is displayed over there.

Leave a Comment