CODEWITHSUNDEEP
angularangular5
Kumaresan Perumal
Kumaresan Perumal

Reputation: 131

how to get device id of a computer and browser in angular 5?

enter image description hereI am working in WEB bank app with angular 5. the task is I want to find out device id of a computer and browser name.

i tried this NPM module:

npm install ngx-device-detector --save

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

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);
    }
    ...
  }

Output:

{  
   "userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36",
   "os":"windows",
   "browser":"chrome",
   "device":"unknown",
   "os_version":"windows-10",
   "browser_version":"66.0.3359.139"
}

I am getting browser name but not device id. take a look at JSON. the device is device: unknow.

If any other options or NPM Modules, please recommend me to accomplish this task.

please help me.

Upvotes: 6

Views: 19729

Answers (2)

Gene
Gene

Reputation: 11285

I think only native apps can do that. So you need to wrap your webapp in a native app shell.

For Android, it's call WebView. So basically it's a native Android app that wraps a website (html).

Upvotes: 1

user2495765
user2495765

Reputation:

Check the demo github project for ngx-device-detector

export class AppComponent {
  propsToShow = ['userAgent', 'os', 'browser', 'device', 'os_version', 'browser_version'];
  deviceInfo = null;
  constructor(private deviceService: DeviceDetectorService) {
    this.deviceInfo = deviceService.getDeviceInfo();
    console.log(this.deviceInfo);
  }

  get isMobile() {
    return this.deviceService.isMobile();
  }

  get isTablet() {
    return this.deviceService.isTablet();
  }

  get isDesktop() {
    return this.deviceService.isDesktop();
  }

REF: https://github.com/KoderLabs/ngx-device-detector/blob/master/demo/src/app/app.component.ts

I hope this will solve your problem.

Upvotes: 0

Related Questions