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 ❤️
New package :
If you use Angular 5, you must use v1.5.2 or earlier
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 |
To install this library, run:
Example :$ npm install ngx-device-detector --saveIn your component where you want to use the Device Service
Example : 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
Example :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:
Example :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:
Example :{
provide: DeviceDetectorService,
useClass: UniversalDeviceDetectorService
},Holds the following properties
To generate all *.js, *.js.map and *.d.ts files:
$ npm run tscTo lint all *.ts files:
$ npm run lintTo run unit tests
Example : $ npm run testTo build the library
Example : $ npm run buildMake sure you have @angular/cli installed
Example : $ npm install -g @angular/cli $ cd demo
$ npm install
$ ng servethe demo will be up at localhost:4200
Please see CHANGE_LOG.md for the updates.
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.
Write to us at IOMechs