-1

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

Hitesh Kansagara
  • 2,401
  • 3
  • 14
  • 25
Bhrungarajni
  • 1,936
  • 3
  • 24
  • 53
  • 2
    [Device name](https://stackoverflow.com/questions/11930356/getting-mobile-device-name-from-javascript), [device OS](https://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript), [location](https://www.w3schools.com/Html/html5_geolocation.asp), [browser](https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769) and I don't know the last one. But seriously, make some research before asking. –  Jun 11 '18 at 10:16
  • 1
    Possible duplicate of [How to detect Safari, Chrome, IE, Firefox and Opera browser?](https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser) –  Jun 11 '18 at 10:17
  • @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 Jun 11 '18 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. –  Jun 11 '18 at 10:26
  • 1
    please try this https://www.npmjs.com/package/ngx-device-detector – Hitesh Kansagara Jun 12 '18 at 08:22
  • 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 Jun 12 '18 at 08:24

1 Answers1

7

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
Sravan
  • 16,897
  • 2
  • 24
  • 48