3.0.9 • Published 5 months ago

ngx-device-info v3.0.9

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

Device detector / Device info / Permissions info

ngx-device-info npm version npm.io ngx-device-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',

Methodsusage
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
deviceNamereturns device name
deviceTypereturns device type
userAgentreturns userAgent
languagereturns device language
isOnlinereturns whether internet is on - off
cookieEnabledchecks is cookieEnabled
vendorreturns vendor info
clientHeightInner height of the HTML document body, including padding but not the horizontal scrollbar height, border, or margin
heightDevice screen height (i.e. all physically visible stuff)
availHeightDevice screen height minus the operating system taskbar (if present)
innerHeightThe current document's viewport height, minus taskbars, etc.
outerHeightHeight the current window visibly takes up on screen
clientWidthFull width of the HTML page as coded, minus the vertical scroll bar
widthDevice screen width (i.e. all physically visible stuff)
availWidthDevice screen width, minus the operating system taskbar (if present)
innerWidthThe browser viewport width (including vertical scroll bar, includes padding but not border or margin)
outerWidthThe outer window width (including vertical scroll bar,
hrefreturns location - href
protocolreturns location - protocol
hostreturns location - host
hostnamereturns location - hostname
pathnamereturns location - pathname
searchreturns location - search
hashreturns location - hash
originreturns location - origin
timeZoneOffSetreturns date- timeZoneOffSet
utcStringreturns date- utcString
timereturns date- time
datereturns date- date
dayreturns date- day
monthreturns date- month
hourreturns date- hour
yearreturns date- year
secondsreturns date- seconds
millisecondsreturns date- milliseconds
utcdatereturns date- utcdate
utcdayreturns date- utcday
utcmonthreturns date- utcmonth
utcyearreturns 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