ngx-device-info

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