Skip to content

An Angular2+ library to detect the device, OS and browser details. Supports Angular5

License

Notifications You must be signed in to change notification settings

putchi/ngx-device-detector

 
 

Repository files navigation

An Angular 2 (and beyond) 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 npm downloads/month npm downloads total github stars license

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();
      console.log(this.deviceInfo);
    }
    ...
  }

Device service

Holds the following properties

  • browser
  • os
  • device
  • userAgent
  • os_version

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

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

Change Log

#1.2.2 (contains breaking changes)

  • Removing the SSR (Universal) support because of the raising issues.
  • Will be revisiting SSR support properly in April.

#1.2.1

  • moved @angular/platform-server to peer-dependencies

#1.2.0

  • minor fixes
  • fixed #27.

#1.1.7

  • minor fixes

#1.1.6

  • fixes. Readme Updated with Angular Universal dependency info

#1.1.5

  • fixes #22, #23

#1.1.4

  • fixes
  • Support added for Angular Universal

#1.1.3

  • fixes

#1.1.2

  • fixes

#1.1.1

  • fixes

#1.1.0 (contains breaking changes)

  • Added official support to Angular5
  • The package name has been changed to ngx-device-detector
  • Renamed the Service from Ng2DeviceService to DeviceDetectorService
  • Renamed the Module from Ng2DeviceDetector to DeviceDetectorModule

#1.0.0 (contains breaking changes)

  • Renamed the Service from Device to Ng2DeviceService
  • Renamed the Module from Ng2DeviceDetector to Ng2DeviceDetectorModule
  • Import has changed from imports: [Ng2DeviceDetectorModule] to imports: [Ng2DeviceDetectorModule.forRoot()]

About

An Angular2+ library to detect the device, OS and browser details. Supports Angular5

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 52.9%
  • TypeScript 44.6%
  • HTML 2.5%