How to fetch the device information using Angular2 and Typescript [duplicate]

Question

I have a table, I need to fill these details into my table from typescript.

1.Device Name
2. Device OS
3. Location
4. Browser
5. IsActive

These fields must be filled from typescript, so can anyone help me to solve this

Device name, device OS, location, browser and I don't know the last one. But seriously, make some research before asking. — user4676340
– user4676340, Commented Jun 11, 2018 at 10:16
@trichetriche i had also been through that question but it doesnt help, and IsActive means, it must say whether device is active or nott — Bhrungarajni
– Bhrungarajni, Commented Jun 11, 2018 at 10:24
"That question" ? I gave you four questions that explain everything you can and can't do. If it doesn't help you, nothing will. — user4676340
– user4676340, Commented Jun 11, 2018 at 10:26
and also you can get this detail from api call and in c# you will get all infrormation then store in table that is easy way — Hitesh Kansagara
– Hitesh Kansagara, Commented Jun 12, 2018 at 8:24

Sravan · Accepted Answer · 2018-06-12 11:06:58Z

9

You can use, ngx-device-detector

ngx-device-detector is An Angular 2 (and beyond) 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.

Installation:

To install this library, run:

$ npm install ngx-device-detector --save

Usage:

Import DeviceDetectorModule in your app.module.ts

  import { NgModule } from '@angular/core';
  import { DeviceDetectorModule } from 'ngx-device-detector';
  ...
  @NgModule({
    declarations: [
      ...
      LoginComponent,
      SignupComponent
      ...
    ],
    imports: [
      CommonModule,
      FormsModule,
      DeviceDetectorModule.forRoot()
    ],
    providers:[
      AuthService
    ]
    ...
  })

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();
      console.log(this.deviceInfo);
    }
    ...
  }

Device service:

Holds the following properties:

browser
os
device
userAgent
os_version

answered Jun 12, 2018 at 11:06

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tarek Bakri Over a year ago

Hi, I am getting this error after using the DeviceDetectorModule "./node_modules/ngx-device-detector/fesm2015/ngx-device-detector.mjs 813:30-36 Can't import the named export 'Inject' from non EcmaScript module (only default export is available)"

Fai Zal Dong Over a year ago

this lib will not give you device name.

Jannick Breunis Mar 4 at 9:08

For the import, use DeviceDetectorService, the module is old. import { DeviceDetectorService } from 'ngx-device-detector';

becher henchiri · Accepted Answer · 2023-09-29 12:23:15Z

You can use angular-device-information is a powerful angular package to detect operating system and version

npm i angular-device-information

 import { Component } from '@angular/core';
 ...
 import { AngularDeviceInformationService } from 'angular-device-information';
 ...
 @Component({
   selector: 'home',  // <home></home>
   styleUrls: [ './home.component.scss' ],
   templateUrl: './home.component.html',
   ...
 })

 export class HomeComponent {
 
   constructor(private deviceInformationService: AngularDeviceInformationService) {
 
      console.log(deviceInformationService.isMobile());  // returns if the device is a mobile device (android / iPhone / windows-phone etc)
      console.log(deviceInformationService.isTablet());  // returns if the device is a tablet (tablet iPad etc)
      console.log(deviceInformationService.isDesktop()); // returns if the app is running on a Desktop browser.
      console.log(deviceInformationService.getDeviceType()); // returns if the app is running on a Desktop browser.
      console.log(deviceInformationService.getDeviceInfo().os);  // returns os name like Windows/Andtoid/iOS/Linux/Mac OS X etc
      console.log(deviceInformationService.getDeviceInfo().osVersion);  // returns os version like 10/8.1/7 ...etc
      console.log(deviceInformationService.getDeviceInfo().browser);  // returns browser name like chrome/firefox ...etc
      console.log(deviceInformationService.getDeviceInfo().browserVersion);  // returns browser version as number
      console.log(deviceInformationService.getDeviceInfo().browserMajorVersion);  // returns full browser version as number
      console.log(deviceInformationService.getDeviceInfo().screen_resolution);  // returns screnn size like 1390x860/640x800 ...etc
      console.log(deviceInformationService.getDeviceInfo().cookies);  // returns cookies enabled or no 
      console.log(deviceInformationService.getDeviceInfo().userAgent);  // returns userAgent
   }
   
 }

Collectives™ on Stack Overflow

How to fetch the device information using Angular2 and Typescript [duplicate]

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related