![\"npm](\"https://img.shields.io/npm/v/angular-device-information.svg\")
\r\n ![\"npm](\"https://img.shields.io/npm/dm/angular-device-information.svg\")
\r\n ![\"license\"](\"https://img.shields.io/npm/l/angular-device-information.svg\")
\r\n ![\"Angular](\"https://img.shields.io/badge/Angular-14--21-red?logo=angular\"){kind=icon}
\r\n ![\"SSR](\"https://img.shields.io/badge/SSR-Compatible-green\"){kind=icon}
\r\n ![\"No](\"https://img.shields.io/badge/No_Deprecated_APIs-✓-brightgreen\"){kind=icon}
\r\n\r\n \r\n \r\n \r\n
\r\n A lightweight Angular service to detect device type, OS, browser, and more —
\r\n works on Mobile, Tablet, and Desktop for 2000+ devices including all modern smartphones.\r\n
Device type: {{ deviceType }}
`\r\n})\r\nexport class AppComponent {\r\n deviceType = '';\r\n\r\n constructor(private deviceInfo: AngularDeviceInformationService) {\r\n this.deviceType = deviceInfo.getDeviceType(); // 'Mobile' | 'Tablet' | 'Desktop'\r\n }\r\n}\r\n```\r\n\r\n### 3. Using `inject()` (Angular 14+)\r\n\r\n```typescript\r\nimport { Component, inject } from '@angular/core';\r\nimport { AngularDeviceInformationService } from 'angular-device-information';\r\n\r\n@Component({\r\n standalone: true,\r\n selector: 'app-root',\r\n template: `Browser: {{ browser }}
`\r\n})\r\nexport class AppComponent {\r\n private device = inject(AngularDeviceInformationService);\r\n browser = this.device.getDeviceInfo().browser;\r\n}\r\n```\r\n\r\n---\r\n\r\n## 📖 Usage\r\n\r\n### Detect device type\r\n\r\n```typescript\r\nimport { AngularDeviceInformationService } from 'angular-device-information';\r\n\r\n@Component({ ... })\r\nexport class MyComponent {\r\n constructor(private device: AngularDeviceInformationService) {\r\n\r\n if (device.isMobile()) {\r\n console.log('Running on a mobile phone');\r\n } else if (device.isTablet()) {\r\n console.log('Running on a tablet');\r\n } else {\r\n console.log('Running on a desktop');\r\n }\r\n\r\n // Or get it as a string:\r\n console.log(device.getDeviceType()); // 'Mobile' | 'Tablet' | 'Desktop'\r\n }\r\n}\r\n```\r\n\r\n### Get detailed device information\r\n\r\n```typescript\r\nconst info = this.device.getDeviceInfo();\r\n\r\nconsole.log(info.os); // 'Windows' | 'Android' | 'iOS' | 'Mac OS X' | 'Linux' | ...\r\nconsole.log(info.osVersion); // '11' | '14.0' | '10' | ...\r\nconsole.log(info.browser); // 'Chrome' | 'Firefox' | 'Safari' | 'Edge' | 'Brave' | ...\r\nconsole.log(info.browserVersion); // '120.0.0.0'\r\nconsole.log(info.browserMajorVersion); // 120\r\nconsole.log(info.screen_resolution); // '1920 x 1080'\r\nconsole.log(info.cookies); // true | false\r\nconsole.log(info.userAgent); // raw user-agent string\r\n```\r\n\r\n### Precise Windows 11 detection (Client Hints)\r\n\r\nWhen you need a guaranteed OS value (Windows 11 vs Windows 10), use the async helper `getPreciseDeviceInfo()` which will attempt to query the User-Agent Client Hints API (`navigator.userAgentData.getHighEntropyValues(['platformVersion'])`) when available. If Client Hints are not present or the browser denies access, the method falls back to the UA-based detection.\r\n\r\n```typescript\r\n// Async: waits for Client Hints when available\r\nconst precise = await this.device.getPreciseDeviceInfo();\r\nconsole.log(precise.os); // 'Windows 11' (if platformVersion >= 13) or 'Windows'\r\n```\r\n\r\n\r\n### Real-world example — adaptive layout\r\n\r\n```typescript\r\nimport { Component, OnInit } from '@angular/core';\r\nimport { AngularDeviceInformationService } from 'angular-device-information';\r\n\r\n@Component({\r\n selector: 'app-layout',\r\n template: `\r\n📱 Mobile layout
\r\n⬜ Tablet layout
\r\n🖥️ Desktop layout
\r\n![\"Donate](\"https://pics.paypal.com/00/s/MGNhMjc1OWQtYmM4Ni00OWM3LTkyN2ItZTliMWI1ZTM0YWZi/file.PNG\")
\r\n\r\n\r\n---\r\n\r\n## 📄 License\r\n\r\n[MIT](https://github.com/becher/angular-device-information/blob/master/LICENSE) © Becher\r\n\r\n","readmeFilename":"README.md"}