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

    3.0.0 • Public • Published

    ngx-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.

    build status npm version license stars

    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

    Regular Demo

    SSR Demo

    Dependencies

    Latest version available for each version of Angular

    ngx-device-detector Angular
    1.3.3 7.x
    1.3.5 8.x
    1.4.1 9.x
    1.4.5 10.x
    2.0.5 11.x
    2.1.0 12.x
    3.0.0 13.x

    Installation

    To install this library, run:

    $ npm install ngx-device-detector --save

    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.
        }
        ...
      }

    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-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, please refer to the polyfills.ts file in your project.

    For example, for an Angular 9.x+ project, you can refer to the changes done in this PR for our demo project that works on IE11

    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

    Install

    npm i ngx-device-detector

    DownloadsWeekly Downloads

    110,392

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    385 kB

    Total Files

    17

    Last publish

    Collaborators

    • ahsanayaz