ngx-pvt-device-detector
TypeScript icon, indicating that this package has built-in type declarations

2.0.4 • Public • Published

ngx-pvt-device-detector

An Angular 6+ 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.

travis build status npm version github stars license

Deprecated package : npm downloads total npm downloads/month

New package : npm downloads total npm downloads/month

If you use Angular 5, you must use v1.5.2 or earlier

DOCS

Ngx Device Detector DOCS

Live DEMO

Ngx Device Detector Demo

Installation

To install this library, run:

$ npm install ngx-pvt-device-detector --save

In your component where you want to use the Device Service

  import { Component } from '@angular/core';
  ...
  import { DeviceDetectorService } from 'ngx-pvt-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.
    }
    ...
  }

To ensure Universal has the correct User Agent for device detection, you'll need to provide it manually. If using ExpressJS for example:

universal-device-detector.service.ts:

import { Inject, Injectable, Optional, PLATFORM_ID } from '@angular/core';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { Request } from 'express';
import { DeviceDetectorService } from 'ngx-pvt-device-detector';
import {isPlatformServer} from '@angular/common';

@Injectable()
export class UniversalDeviceDetectorService extends DeviceDetectorService {
  constructor(@Inject(PLATFORM_ID) platformId: any, @Optional() @Inject(REQUEST) request: Request) {
    super(platformId);
    if (isPlatformServer(platformId)){
      super.setDeviceInfo((request.headers['user-agent'] as string) || '');
    }
  }
}

app.server.module.ts:

{
  provide: DeviceDetectorService,
  useClass: UniversalDeviceDetectorService
},

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.

License

MIT © Ahsan Ayaz

Readme

Keywords

none

Package Sidebar

Install

npm i ngx-pvt-device-detector

Weekly Downloads

2

Version

2.0.4

License

none

Unpacked Size

486 kB

Total Files

20

Last publish

Collaborators

  • privaterepo