# ng-device-detector

> Uses user-agent to set css classes or directly usable via JS.

Latest version **5.1.4** (published 2019-10-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-device-detector
pnpm add ng-device-detector
yarn add ng-device-detector
bun add ng-device-detector
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.1.4 |
| Published | 2019-10-21 |
| First published | 2015-01-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 23.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 235 |
| Author | srfrnk |
| Maintainers | srfrnk |
| Keywords | angularjs |

## Links

- npm: https://www.npmjs.com/package/ng-device-detector
- Repository: https://github.com/srfrnk/ng-device-detector
- Issues: https://github.com/srfrnk/ng-device-detector/issues
- npm.io page: https://npm.io/package/ng-device-detector

## Dependencies (2)

- [re-tree](https://npm.io/package/re-tree.md) ^0.1.7
- [ua-device-detector](https://npm.io/package/ua-device-detector.md) ^1.1.1

## Recent versions

- 5.1.4 (latest) — 2019-10-21
- 5.1.3 — 2018-12-01
- 5.1.2 — 2018-02-24
- 5.1.1 — 2018-02-17
- 5.0.2 — 2017-12-22
- 5.0.1 — 2017-12-01
- 4.0.3 — 2017-04-06
- 4.0.0 — 2017-03-03
- 3.0.1 — 2016-02-12
- 1.1.7 — 2015-05-15
- 1.1.6 — 2015-05-15
- 1.1.5 — 2015-05-11
- 1.1.4 — 2015-05-09
- 1.1.3 — 2015-05-08
- 1.1.2 — 2015-03-14
- … 2 more at https://npm.io/package/ng-device-detector/versions

## README

# ng-device-detector
##### Angular module to detect OS / Browser / Device

[![Build Status](https://travis-ci.org/srfrnk/ng-device-detector.svg?branch=master)](https://travis-ci.org/srfrnk/ng-device-detector)
[![GitHub issues](https://img.shields.io/github/issues/srfrnk/ng-device-detector.svg)](https://github.com/srfrnk/ng-device-detector/issues)
[![Known Vulnerabilities](https://snyk.io/package/npm/ng-device-detector/badge.svg)](https://snyk.io/package/npm/ng-device-detector)
[![Open Source Helpers](https://www.codetriage.com/srfrnk/ng-device-detector/badges/users.svg)](https://www.codetriage.com/srfrnk/ng-device-detector)

[![GitHub license](https://img.shields.io/github/license/srfrnk/ng-device-detector.svg)](https://github.com/srfrnk/ng-device-detector/blob/master/license.txt)
[![npm](https://img.shields.io/npm/dm/ng-device-detector.svg)](https://www.npmjs.com/package/ng-device-detector) 
[![npm](https://img.shields.io/npm/dt/ng-device-detector.svg)](https://www.npmjs.com/package/ng-device-detector)
[![npm](https://img.shields.io/npm/v/ng-device-detector.svg)](https://www.npmjs.com/package/ng-device-detector)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![Semver](http://img.shields.io/SemVer/2.0.0.png)](http://semver.org/spec/v2.0.0.html)

Uses user-agent to set CSS classes or directly usable via JS.
See website: [http://srfrnk.github.io/ng-device-detector](http://srfrnk.github.io/ng-device-detector)

### Install
NPM
```sh
$ npm install ng-device-detector --save
```
Bower
```sh
$ bower install ng-device-detector --save
```
Browser (Add scripts in HTML)
```sh
<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
```js
angular.module('app', ['ng.deviceDetector']);
```
Injecting *DeviceDetector* service in controller
```js
angular.module('app').controller('Home', function($scope, deviceDetector){
  // Awesome stuff
});
```

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

### Setup

You can set custom detectors at the provider object.
The 
```javascript
angular.module('app', ["ng.deviceDetector"])
    .config(['deviceDetectorProvider', function(deviceDetectorProvider) {
      deviceDetectorProvider.addCustom("Custom_UA_Entry", {
        and:["\\bCustom_UA_Entry\\b", {
            not:"\\bChrome\\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
 
### Support
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](https://github.com/srfrnk/ng-device-detector/blob/master/ng-device-detector.js).

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

### Example

See [plunker](http://plnkr.co/edit/urqMI1?p=preview)

### License

[MIT License](//github.com/srfrnk/ng-device-detector/blob/master/license.txt)

---
_Source: https://npm.io/package/ng-device-detector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._