rm-ng-device-detection

A lightweight, tree-shakable Angular library for detecting and classifying devices. Identify device type, OS, browser, and more based on user agent strings to create responsive, device-specific user experiences.

See It In Action

Features

• Device Detection - Identify mobile, tablet, and desktop devices
• OS & Browser Detection - Detect operating systems and browsers
• Lightweight & Fast - Minimal bundle size with tree-shaking support
• Easy Integration - Simple service-based API
• Standalone Support - Works with Angular 14+ standalone components
• No Dependencies - Pure TypeScript implementation
• SSR Compatible - Works with Angular Universal

Installation

Install the library using npm or yarn:

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

or

yarn add rm-ng-device-detection

Quick Start

Step 1: Import the Service

Import the service in your component (works with both standalone and module-based apps):

import { Component, OnInit } from '@angular/core';
import { RmNgDeviceDetectionService, DeviceInfo } from 'rm-ng-device-detection';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  deviceInfo: DeviceInfo | null = null;

  constructor(private deviceService: RmNgDeviceDetectionService) {}

  ngOnInit(): void {
    this.detectDevice();
  }

  private detectDevice(): void {
    // Get complete device information
    this.deviceInfo = this.deviceService.getDeviceInfo();

    // Use helper methods for specific checks
    const isMobile = this.deviceService.isMobile();
    const isTablet = this.deviceService.isTablet();
    const isDesktop = this.deviceService.isDesktop();

    console.log('Device Info:', this.deviceInfo);
    console.log('Is Mobile:', isMobile);
    console.log('Is Tablet:', isTablet);
    console.log('Is Desktop:', isDesktop);
  }
}

Step 2: Use in Your Template

<div *ngIf="deviceInfo">
  <h2>Device Information</h2>
  <p>Device Type: {{ deviceInfo.device }}</p>
  <p>Browser: {{ deviceInfo.browser }}</p>
  <p>Operating System: {{ deviceInfo.os }}</p>
  <p>OS Version: {{ deviceInfo.os_version }}</p>
</div>

<!-- Conditional rendering based on device type -->
<div *ngIf="deviceService.isMobile()">
  <p>Mobile-specific content</p>
</div>

<div *ngIf="deviceService.isDesktop()">
  <p>Desktop-specific content</p>
</div>

API Reference

DeviceInfo Interface

The getDeviceInfo() method returns a DeviceInfo object with the following properties:

interface DeviceInfo {
  browser: string;        // Browser name (e.g., 'Chrome', 'Firefox', 'Safari')
  os: string;            // Operating system (e.g., 'Windows', 'macOS', 'Android')
  device: string;        // Device type (e.g., 'mobile', 'tablet', 'desktop')
  userAgent: string;     // Full user agent string
  os_version: string;    // Operating system version
}

Service Methods

getDeviceInfo(): DeviceInfo

Returns complete device information including browser, OS, device type, user agent, and OS version.

Example:

const deviceInfo = this.deviceService.getDeviceInfo();
console.log(deviceInfo);
// Output: { browser: 'Chrome', os: 'Windows', device: 'desktop', ... }

isMobile(): boolean

Returns true if the device is a mobile device (Android, iPhone, Windows Phone, etc.).

Example:

if (this.deviceService.isMobile()) {
  // Load mobile-optimized components
}

isTablet(): boolean

Returns true if the device is a tablet (iPad, Android tablets, etc.).

Example:

if (this.deviceService.isTablet()) {
  // Adjust layout for tablets
}

isDesktop(): boolean

Returns true if the device is a desktop/laptop computer.

Example:

if (this.deviceService.isDesktop()) {
  // Enable advanced desktop features
}

Usage Examples

Example 1: Responsive Component Loading

import { Component, OnInit } from '@angular/core';
import { RmNgDeviceDetectionService } from 'rm-ng-device-detection';

@Component({
  selector: 'app-responsive',
  template: `
    <ng-container *ngIf="isMobile">
      <app-mobile-header></app-mobile-header>
    </ng-container>
    <ng-container *ngIf="!isMobile">
      <app-desktop-header></app-desktop-header>
    </ng-container>
  `
})
export class ResponsiveComponent implements OnInit {
  isMobile: boolean = false;

  constructor(private deviceService: RmNgDeviceDetectionService) {}

  ngOnInit(): void {
    this.isMobile = this.deviceService.isMobile();
  }
}

Example 2: Analytics & Tracking

import { Component, OnInit } from '@angular/core';
import { RmNgDeviceDetectionService } from 'rm-ng-device-detection';

@Component({
  selector: 'app-analytics'
})
export class AnalyticsComponent implements OnInit {
  constructor(
    private deviceService: RmNgDeviceDetectionService,
    private analyticsService: AnalyticsService
  ) {}

  ngOnInit(): void {
    const deviceInfo = this.deviceService.getDeviceInfo();

    // Send device info to analytics
    this.analyticsService.trackEvent('device_info', {
      device: deviceInfo.device,
      browser: deviceInfo.browser,
      os: deviceInfo.os,
      os_version: deviceInfo.os_version
    });
  }
}

Example 3: Device-Specific Styling

import { Component, OnInit } from '@angular/core';
import { RmNgDeviceDetectionService } from 'rm-ng-device-detection';

@Component({
  selector: 'app-styled',
  template: `
    <div [class]="deviceClass">
      <h1>Content adapts to your device</h1>
    </div>
  `,
  styles: [`
    .mobile { font-size: 14px; padding: 10px; }
    .tablet { font-size: 16px; padding: 15px; }
    .desktop { font-size: 18px; padding: 20px; }
  `]
})
export class StyledComponent implements OnInit {
  deviceClass: string = 'desktop';

  constructor(private deviceService: RmNgDeviceDetectionService) {}

  ngOnInit(): void {
    if (this.deviceService.isMobile()) {
      this.deviceClass = 'mobile';
    } else if (this.deviceService.isTablet()) {
      this.deviceClass = 'tablet';
    } else {
      this.deviceClass = 'desktop';
    }
  }
}

🎬 Live Demo

Try the library in action with our interactive demos:

Platform	Link
StackBlitz
npm
GitHub

Compatibility

Angular Version Support

Browser Support

Configuration & Advanced Usage

Server-Side Rendering (SSR)

The library is compatible with Angular Universal. The user agent is automatically detected from the request headers:

// Works automatically with SSR - no special configuration needed
const deviceInfo = this.deviceService.getDeviceInfo();

Custom User Agent

If you need to test with a custom user agent string, you can initialize the service with your own user agent:

// Note: This is typically not needed as the library auto-detects
// This example is for testing purposes only

Use Cases

• Analytics: Track device types, browsers, and OS versions
• Responsive Design: Load device-specific components and styles
• Content Adaptation: Serve different content based on device capabilities
• Performance: Lazy load features based on device type
• Feature Detection: Enable/disable features based on device capabilities
• Progressive Web Apps: Optimize PWA experience per device
• A/B Testing: Run device-specific experiments

Tree-Shaking & Bundle Size

This library is optimized for modern Angular applications:

• Marked as sideEffects: false for aggressive tree-shaking
• Service-based API only imports what you use
• No external runtime dependencies
• Minimal bundle impact (~2KB gzipped)

Development

Want to contribute or run the library locally?

Setup

# Clone the repository
git clone https://github.com/malikrajat/rm-ng-device-detection.git
cd rm-ng-device-detection

# Install dependencies
pnpm install

# Start development server
pnpm start  # Serves demo app on http://localhost:4200

Build

# Build the library
pnpm build

# Run tests
pnpm test

# Run linter
pnpm lint

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Contribution Guidelines

• Follow the Angular Style Guide
• Write unit tests for new features
• Update documentation for API changes
• Keep commits focused and descriptive

Issues & Support

Need help or found a bug?

Changelog

See CHANGELOG.md for release history.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Rajat Malik

• Website: rajatmalik.dev
• Email: mr.rajatmalik@gmail.com
• LinkedIn: errajatmalik
• GitHub: @malikrajat

Support This Project

If rm-ng-device-detection has helped you build better Angular applications, please consider:

⭐ Star This Repository

A star helps other developers discover this library and shows your appreciation!

🌟 Why Star?

• Help increase visibility in the Angular community
• Support ongoing development and improvements
• Show appreciation for free, quality tools
• Encourage more open-source contributions

Explore More Libraries

Check out my other Angular libraries that might help your project:

Acknowledgments

This library was inspired by the need for a lightweight, modern device detection solution for Angular applications. Special thanks to the Angular community for their feedback and contributions.

Made with ❤️ by Rajat Malik

Star on GitHub • View on npm • Report Issue

Changelog

All notable changes to rm-ng-device-detection will be documented in this file.

This project follows Semantic Versioning and the format is based on
Keep a Changelog.

[4.0.0] - 2025-11-29

Added

• Angular 21 support.
• Updated RxJS to v8.
• Updated TypeScript to 5.5+.
• Added new keywords for better npm discoverability.
• Added SSR-safe improvements.
• Introduced new CHANGELOG tracking.

Changed

• Updated internal device detection logic for better accuracy.
• Updated ng-packagr to version 21.
• Improved TypeScript types and performance.

Fixed

• Fixed incorrect detection for some newer Android devices.
• Fixed SSR fallback where user agent was undefined.

[3.0.0] - 2024

Added

• Angular 18/19 compatibility.
• Improved browser detection logic.
• Minor documentation updates.

Changed

• Refactored service to reduce bundle size.
• Updated dependencies to latest Angular versions.

Fixed

• Issue with mobile detection on iOS 17.
• Type definitions mismatch for SSR builds.

[2.0.0] - 2023

Added

• Angular 16/17 support.
• New API: isMobile(), isTablet(), isDesktop() with improved results.
• Added support for detecting OS (Windows, macOS, Android, iOS).

Changed

• Refactored library to use standalone APIs.
• Cleaner tree-shakable structure.

Fixed

• Bug where browser version was misdetected on Chrome 110.
• Device detection issues in Safari.

[1.0.0] - 2021 (Initial Release)

Added

• Core device detection service.
• Browser detection (Chrome, Firefox, Safari, Edge, etc.).
• Device type detection (Mobile, Tablet, Desktop).
• Simple API for Angular developers.

Unreleased

Planned

• Add unit test coverage (Vitest).
• Add device-breakpoint events.
• Add option to override user-agent for testing.
• Provide full SSR-friendly examples.

📌 Notes

• Each new version should be added on top.
• Use clear categories: Added, Changed, Fixed, Removed, Deprecated.
• Always date your release version.