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

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 |
| 10.x.x | 20.x |
| 11.x.x | 21.x |

Installation

To install this library, run:

``bash
$ npm install ngx-device-detector --save
`

In your component where you want to use the Device Service

`typescript
import { Component } from '@angular/core';
...
import { DeviceDetectorService } from 'ngx-device-detector';
...
@Component({
selector: '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();
const isDesktopMode = this.deviceService.isDesktopModeEnabled();
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.
console.log(isDesktopMode); // returns if a mobile device is running in desktop mode
}
...
}

`

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

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

export const REQUEST = new InjectionToken('REQUEST');
export const RESPONSE = new InjectionToken('RESPONSE');
`

universal-device-detector.service.ts:

`typescript
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:

`typescript
{
provide: DeviceDetectorService,
useClass: UniversalDeviceDetectorService
},
`

Device service

Holds the following properties

- browser
- os
- device
- userAgent
- os_version
- isDesktopMode

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.
- isDesktopModeEnabled() : returns if a mobile device is running in desktop mode (mobile browsers requesting desktop websites)

Development

To generate all .js, .js.map and *.d.ts files:

`bash
$ npm run tsc
`

To lint all *.ts files:

`bash
$ npm run lint
`

To run unit tests

`bash
$ npm run test
`

To build the library

`bash
$ npm run build
`

Run the DEMO

Make sure you have @angular/cli installed

`bash
$ npm install -g @angular/cli
`

`bash
$ 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