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 |
To install this library, run:
$ npm install ngx-device-detector --saveIn 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
},Holds the following properties
- browser
- os
- device
- userAgent
- os_version
- 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.
To generate all *.js, *.js.map and *.d.ts files:
$ npm run tscTo lint all *.ts files:
$ npm run lintTo run unit tests
$ npm run testTo build the library
$ npm run buildMake sure you have @angular/cli installed
$ 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.
If you like the library and want to support, you can do it by buying me a coffee at
