Ngx Device Detector

529

103

Muhammad Ahsan Ayaz

Added on December 21, 2024

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.

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.

Muhammad Ahsan Ayaz

README.MD

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. This library was built at KoderLabs, which is one of the best places I've worked at ❤️

stars

Deprecated package :

New package :

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

DOCS

Ngx Device Detector DOCS

Live DEMO

Regular 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.x.x 13.x
4.x.x 14.x
5.x.x 15.x
6.x.x 16.x
7.x.x 17.x
8.x.x 18.x
9.x.x 19.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.
    }
    ...
  }

For SSR, you have to make sure that the User Agent is available for device detection. I.e. you'll need to provide it manually. If using ExpressJS for example:

express.tokens.ts

import { InjectionToken } from '@angular/core';
import { Request, Response } from 'express';

export const REQUEST = new InjectionToken<Request>('REQUEST');
export const RESPONSE = new InjectionToken<Response>('RESPONSE');

universal-device-detector.service.ts:

import { Inject, Injectable, Optional, PLATFORM_ID } from '@angular/core';
import { REQUEST } from 'path/to/express.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.

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

Need help with your Angular/Web projects

Write to us at IOMechs

Related Content

ngx-valdemort

ngx-valdemort gives you simpler, cleaner validation error messages for your Angular components.
GitHubUpdated today

rx-angular

RxAngular offers a comprehensive toolset for handling fully reactive Angular applications with the main focus on runtime performance and template rendering.
GitHubUpdated 27 days ago

ng2-file-upload

Easy to use Angular components for files upload
GitHubUpdated 1 month ago

ng2-charts

Beautiful charts for Angular based on Chart.js
GitHubUpdated 1 month ago

ng2-dragula

Easy to use Angular components on top of dragula to add drag and drop to your application
GitHubUpdated 10 months ago

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.