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.
New package :
If you use Angular 5, you must use v1.5.2 or earlier
DOCS
Live 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 |
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.
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
Sponsorship
If you like the library and want to support, you can do it by buying me a coffee at