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:

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

or

`bash
yarn add rm-ng-device-detection
`

---

Quick Start

$3

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

`typescript
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);
}
}
`

$3

`html

Device Information

Device Type: {{ deviceInfo.device }}

Browser: {{ deviceInfo.browser }}

Operating System: {{ deviceInfo.os }}

OS Version: {{ deviceInfo.os_version }}

Mobile-specific content

Desktop-specific content

`

---

API Reference

$3

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

`typescript
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
}
`

$3

#### getDeviceInfo(): DeviceInfo
Returns complete device information including browser, OS, device type, user agent, and OS version.

Example:
`typescript
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:
`typescript
if (this.deviceService.isMobile()) {
// Load mobile-optimized components
}
`

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

Example:
`typescript
if (this.deviceService.isTablet()) {
// Adjust layout for tablets
}
`

#### isDesktop(): boolean
Returns true if the device is a desktop/laptop computer.

Example:
`typescript
if (this.deviceService.isDesktop()) {
// Enable advanced desktop features
}
`

---

Usage Examples

$3

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

@Component({
selector: 'app-responsive',
template:







})
export class ResponsiveComponent implements OnInit {
isMobile: boolean = false;

constructor(private deviceService: RmNgDeviceDetectionService) {}

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

$3

`typescript
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
});
}
}
`

$3

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

@Component({
selector: 'app-styled',
template:

,
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

$3

| Angular Version | Supported | Standalone | Package Version |
|----------------|-----------|------------|-----------------|
| 14.x | Full | Yes | 1.x.x - 3.x.x |
| 15.x | Full | Yes | 1.x.x - 3.x.x |
| 16.x | Full | Yes | 1.x.x - 3.x.x |
| 17.x | Full | Yes | 1.x.x - 3.x.x |
| 18.x | Full | Yes | 1.x.x |
| 19.x | Full | Yes | 2.x.x |
| 20.x | Full | Yes | 3.x.x |
| 21.x | Full | Yes | Latest |

$3

| Browser | Minimum Version | Support Status |
|---------|-----------------|----------------|
| Chrome | 80+ | Full |
| Firefox | 75+ | Full |
| Safari | 13+ | Full |
| Edge | 80+ | Full |
| Opera | 67+ | Full |

---

Configuration & Advanced Usage

$3

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

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

$3

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

`typescript
// 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?

$3

`bash

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
`

$3

`bash

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

$3

- 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?

| Type | Link |
|------|------|
| Bug Report | Report a Bug |
| Feature Request | Request a Feature |
| Discussions | Join Discussion |
| Email | mr.rajatmalik@gmail.com |

---

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:

$3

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


$3

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

$3

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