Device detector / Device info / Permissions info

Angular library which provides device information / type / name and also it provides much more device independent features & informations.
Get device information and more

Import

Import the module on your app.module.ts file as follow.

import { NgxDeviceInfoModule} from "ngx-device-info";

Add to imports

imports: [
  ...
  NgxDeviceInfoModule
  ...
],

Using service

Import the servie to appropriate component / service file as follows.

import { NgxDeviceInfoService } from 'ngx-device-info';

constructor(public device: NgxDeviceInfoService) {}

Permissions

Get the permission status for following api's - as boolean (true/false):

public deviceInfo: any;

constructor(public device: NgxDeviceInfoService) {
  this.device.getDeviceInfo().then((data) => {
    this.deviceInfo = data;
  });
}

Methods

Permission list:

'geolocation',
'notifications',
'push',
'midi',
'camera',
'microphone',
'speaker',
'device-info',
'background-fetch',
'background-sync',
'bluetooth',
'persistent-storage',
'ambient-light-sensor',
'accelerometer',
'gyroscope',
'magnetometer',
'clipboard',
'display-capture',
'nfc',

Methods	usage
getDeviceName()	returns device specific `name`
isDesktop()	returns `true` if decice is desktop
isMobile()	returns `true` if decice is mobile
isTablet()	returns `true` if decice is tablet
getDeviceType()	returns device type `mobile - tablet - desktop`
getDeviceInfo()	returns object of info
	deviceName	returns device `name`
	deviceType	returns device `type`
	userAgent	returns `userAgent`
	language	returns device language
	isOnline	returns whether internet is `on` - `off`
	cookieEnabled	checks is `cookieEnabled`
	vendor	returns `vendor` info
	clientHeight	Inner height of the HTML document body, including padding but not the horizontal scrollbar height, border, or margin
	height	Device screen height (i.e. all physically visible stuff)
	availHeight	Device screen height minus the operating system taskbar (if present)
	innerHeight	The current document's viewport height, minus taskbars, etc.
	outerHeight	Height the current window visibly takes up on screen
	clientWidth	Full width of the HTML page as coded, minus the vertical scroll bar
	width	Device screen width (i.e. all physically visible stuff)
	availWidth	Device screen width, minus the operating system taskbar (if present)
	innerWidth	The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
	outerWidth	The outer window width (including vertical scroll bar,
	href	returns location - `href`
	protocol	returns location - `protocol`
	host	returns location - `host`
	hostname	returns location - `hostname`
	pathname	returns location - `pathname`
	search	returns location - `search`
	hash	returns location - `hash`
	origin	returns location - `origin`
	timeZoneOffSet	returns date- `timeZoneOffSet`
	utcString	returns date- `utcString`
	time	returns date- `time`
	date	returns date- `date`
	day	returns date- `day`
	month	returns date- `month`
	hour	returns date- `hour`
	year	returns date- `year`
	seconds	returns date- `seconds`
	milliseconds	returns date- `milliseconds`
	utcdate	returns date- `utcdate`
	utcday	returns date- `utcday`
	utcmonth	returns date- `utcmonth`
	utcyear	returns date- `utcyear`

Code integration

To use this package as a service npm i ngx-device-info install this on the root angular project .

Note: Don't forget to run this commend npm i ngx-device-info on root folder or else it will throw error.

Then import the module as follow on imports array

NgxDeviceInfoModule