@yberion/ngx-device-detector_tmp
v5.0.0
Published
<a href="https://koderlabs.github.io/ngx-device-detector"> <h1 align="center">ngx-device-detector</h1> </a>
Downloads
9
Maintainers
Readme
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.0.0 | 13.x | | 4.0.0 | 14.x | | 5.0.0 | 15.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.