Skip to content

Latest commit

 

History

History
110 lines (75 loc) · 2.71 KB

README.md

File metadata and controls

110 lines (75 loc) · 2.71 KB

rm-ng-device-detection

rm-ng-device-detection Library is a powerful tool for detecting and classifying devices in Angular applications. It provides an easy-to-use service that can identify the user's device type (mobile, tablet, desktop), operating system, browser, and more based on the user agent string. This library is designed to help developers tailor user experiences based on device characteristics, enhancing responsiveness and usability.

Installation

To install this library, run:

$ npm install rm-ng-device-detection --save

Live DEMO

See the implementation here

In your component where you want to use the Device Service

  import { Component } from '@angular/core';
  ...
  import { RmNgDeviceDetectionService, DeviceInfo } from 'rm-ng-device-detection';
  ...
  @Component({
    selector: 'app-root',
    standalone: true,
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
  })

  export class HomeComponent {
    deviceInfo: null | DeviceInfo = null;
    constructor(private service: RmNgDeviceDetectionService) {
      this.getDeviceInfo();
    }
    ...
    getDeviceInfo(): void {
      this.deviceInfo = this.service.getDeviceInfo();
      const isMobile = this.service.isMobile();
      const isTablet = this.service.isTablet();
      const isDesktop = this.service.isDesktop();
      console.log(this.deviceInfo);
      console.log(isMobile); 
      console.log(isTablet); 
      console.log(isDesktop); 
    }
    ...
  }

Device service

Holds the following properties

  • browser
  • os
  • device
  • userAgent
  • os_version

Helper Methods

  • isMobile() : returns if the device is a mobile device (android / iPhone/ windows-phone etc)
  • isTablet() : returns if the device us a tablet (iPad etc)
  • isDesktop() : returns if the app is running on a Desktop browser.

Version Mapping

Version Ng
1.x.x 18.x
2.x.x 19.x

Issues

If you identify any errors in this component, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!

Author services

Are you interested in this library but lacks features? Write to the author, he can do it for you.

Credits

The library is inspired by one other library.

Author

Rajat Malik