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:
Example :$ npm install ngx-device-detector --save
In 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 tsc
To lint all *.ts
files:
$ npm run lint
To run unit tests
Example : $ npm run test
To build the library
Example : $ npm run build
Make sure you have @angular/cli installed
Example : $ npm install -g @angular/cli
$ cd demo
$ npm install
$ ng serve
the 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