Get Current Device Information in Angular

In this article, we’ll learn how to get current device information with a browser in Angular. For that, we used the “ngx-device-detector” module. Let’s create a new project to implement device information in angular for that you need to run the following command to create a project.


ng new deviceinformation

“deviceinformation” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd deviceinformation”. To Run angular applications, it required to run “ng serve”.


After that, we need to install the ngx-device-detector npm package in our application. For that run the below command to install.


npm install ngx-device-detector

After install module we need to use in our component to use. Let’s add the below code in our app.component.ts file to get the browser information with device.


import { Component, VERSION } from "@angular/core";
import { DeviceDetectorService } from "ngx-device-detector";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  deviceInfo = null;
  isDesktopDevice: boolean;
  isTablet: boolean;
  isMobile: boolean;

  constructor(private deviceService: DeviceDetectorService) {
    this.epicFunction();
  }

  epicFunction() {
    this.deviceInfo = this.deviceService.getDeviceInfo();
    this.isMobile = this.deviceService.isMobile();
    this.isTablet = this.deviceService.isTablet();
    this.isDesktopDevice = this.deviceService.isDesktop();
  }
}

below code need to “app.component.html” file.


<h3>Device Informations</h3>
<table class="table">
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Device Type</td>
      <td>{{deviceInfo.deviceType}}</td>
    </tr>
    <tr>
      <td>User Agent</td>
      <td>{{deviceInfo.userAgent}}</td>
    </tr>
    <tr>
      <td>OS</td>
      <td>{{deviceInfo.os}}</td>
    </tr>
    <tr>
      <td>OS version</td>
      <td>{{deviceInfo.os_version}}</td>
    </tr>

    <tr>
      <td>Browser Version</td>
      <td>{{deviceInfo.browser_version}}</td>
    </tr>

    <tr>
      <td>isDesktop</td>
      <td>{{isDesktopDevice}}</td>
    </tr>

    <tr>
      <td>isTablet</td>
      <td>{{isTablet}}</td>
    </tr>

    <tr>
      <td>isMobile</td>
      <td>{{isMobile}}</td>
    </tr>
  </tbody>
</table>



Output

Below is the full embeded code for get current device information in angular. you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •