ngx-device-detector

An Angular 5+ powered AOT compatible device detector that helps to identify browser, os and other useful information regarding the device using the app. The processing is based on user-agent.

Deprecated package :

New package :

DOCS

Ngx Device Detector DOCS

Live DEMO

Ngx Device Detector Demo

Installation

To install this library, run:

$ npm install ngx-device-detector --save

Usage

Import DeviceDetectorModule in your app.module.ts

  import { NgModule } from '@angular/core';   import { DeviceDetectorModule } from 'ngx-device-detector';   ...   @NgModule({     declarations: [       ...       LoginComponent,       SignupComponent       ...     ],     imports: [       CommonModule,       FormsModule,       DeviceDetectorModule.forRoot()     ],     providers:[       AuthService     ]     ...   })

In your component where you want to use the Device Service

  import { Component } from '@angular/core';   ...   import { DeviceDetectorService } from 'ngx-device-detector';   ...   @Component({     selector: 'home',  // <home></home>     styleUrls: [ './home.component.scss' ],     templateUrl: './home.component.html',     ...   })    export class HomeComponent {     deviceInfo = null;     ...     constructor(..., private http: Http, private deviceService: DeviceDetectorService) {       this.epicFunction();     }     ...     epicFunction() {       console.log('hello `Home` component');       this.deviceInfo = this.deviceService.getDeviceInfo();       const isMobile = this.deviceService.isMobile();       const isTablet = this.deviceService.isTablet();       const isDesktopDevice = this.deviceService.isDesktop();       console.log(this.deviceInfo);       console.log(isMobile);  // returns if the device is a mobile device (android / iPhone / windows-phone etc)       console.log(isTablet);  // returns if the device us a tablet (iPad etc)       console.log(isDesktopDevice); // returns if the app is running on a Desktop browser.     }     ...   }

Device service

Holds the following properties

browser
os
device
userAgent
os_version

Helper Methods

isMobile() : returns if the device is a mobile device (android / iPhone/ windows-phone etc)
isTablet() : returns if the device us a tablet (iPad etc)
isDesktop() : returns if the app is running on a Desktop browser.

Development

To generate all *.js, *.js.map and *.d.ts files:

  $ npm run tsc

To lint all *.ts files:

  $ npm run lint

To run unit tests

  $ npm run test

To build the library

  $ npm run build

Run the DEMO

Make sure you have @angular/cli installed

  $ npm install -g @angular/cli

  $ cd demo   $ npm install   $ ng serve

the demo will be up at localhost:4200

Change Log

Please see CHANGE_LOG.MD for the updates.

IE10, IE11 Compatibility

If you're consuming the library for IE10 & IE11, make sure to uncomment (at least) these lines from src/polyfills.ts in your project.

import 'core-js/es6/string'; import 'core-js/es6/array'; import 'core-js/es6/map';

Credits

The library is inspired by and based on the work from ng-device-detector . Also used a typescript wrapper of the amazing work in ReTree for regex based needs and an Angular2 Library Creator boilerplate to get the work started fast. I.e. Generator Angular2 library.

Angular Device Detector