Friday, May 29FreeJQuery

Angular Device Detector


ngx device detector

An Angular2+ library to detect the device, OS and browser details. An Angular 2 (and beyond) powered AOT compatible device detector that helps to identify the browser, os and other useful information regarding the device using the app. The processing is based on user-agent.

Installation of ngx device detector

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

 For More Free jquery plugins Click


Leave a Reply

Your email address will not be published. Required fields are marked *