{"id":26776335,"url":"https://github.com/ahsanayaz/ngx-device-detector","last_synced_at":"2025-05-14T03:09:50.030Z","repository":{"id":12939278,"uuid":"73164717","full_name":"AhsanAyaz/ngx-device-detector","owner":"AhsanAyaz","description":"An Angular v7+ library to detect the device, OS, and browser details. ","archived":false,"fork":false,"pushed_at":"2024-12-08T17:13:46.000Z","size":17009,"stargazers_count":536,"open_issues_count":35,"forks_count":104,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-11T22:37:24.063Z","etag":null,"topics":["angular","device-detection","device-detector","ng5","ngx-device-detector"],"latest_commit_sha":null,"homepage":"https://ahsanayaz.github.io/ngx-device-detector","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AhsanAyaz.png","metadata":{"files":{"readme":"README.MD","changelog":"CHANGE_LOG.MD","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"ahsanayaz"}},"created_at":"2016-11-08T08:23:44.000Z","updated_at":"2025-05-07T16:49:04.000Z","dependencies_parsed_at":"2023-02-12T02:30:37.396Z","dependency_job_id":"b069def0-d496-492c-b6db-c8d989324e7e","html_url":"https://github.com/AhsanAyaz/ngx-device-detector","commit_stats":null,"previous_names":["ahsanayaz/ngx-device-detector","koderlabs/ng2-device-detector","koderlabs/ngx-device-detector"],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhsanAyaz%2Fngx-device-detector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhsanAyaz%2Fngx-device-detector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhsanAyaz%2Fngx-device-detector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhsanAyaz%2Fngx-device-detector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AhsanAyaz","download_url":"https://codeload.github.com/AhsanAyaz/ngx-device-detector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254059511,"owners_count":22007769,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","device-detection","device-detector","ng5","ngx-device-detector"],"created_at":"2025-03-29T03:34:43.288Z","updated_at":"2025-05-14T03:09:49.823Z","avatar_url":"https://github.com/AhsanAyaz.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ahsanayaz"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/AhsanAyaz/ngx-device-detector/master/assets/logo.svg\" width=\"200\"\u003e\n\u003c/p\u003e\n\n\n\u003ca href=\"https://ahsanayaz.github.io/ngx-device-detector\"\u003e\n  \u003ch1 align=\"center\"\u003engx-device-detector\u003c/h1\u003e\n\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\nAn Angular 6+ powered AOT compatible device detector that helps to identify browser, os and other useful information regarding the device using the app. The processing is based on user-agent. This library was built at \u003ca href=\"https://github.com/KoderLabs\"\u003eKoderLabs\u003c/a\u003e, which is one of the best places I've worked at ❤️\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/AhsanAyaz/ngx-device-detector/actions\"\u003e\u003cimg src=\"https://github.com/ahsanayaz/ngx-device-detector/actions/workflows/main.yml/badge.svg\" alt=\"build status\" \u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/ngx-device-detector\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/ngx-device-detector.svg\" alt=\"npm version\" \u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/ngx-device-detector\"\u003e\u003cimg src=\"https://img.shields.io/github/license/ahsanayaz/ngx-device-detector?style=flat\" alt=\"license\" \u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/ngx-device-detector\"\u003e\u003cimg src=\"https://badgen.net/github/stars/AhsanAyaz/ngx-device-detector\" alt=\"stars\" \u003e\u003c/a\u003e\n\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ng2-device-detector\"\u003eDeprecated package :\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ng2-device-detector\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/ng2-device-detector.svg?style=flat-square\" alt=\"npm downloads total\" \u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ng2-device-detector\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/ng2-device-detector.svg\" alt=\"npm downloads/month\" \u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ngx-device-detector\"\u003eNew package :\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ngx-device-detector\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/ngx-device-detector.svg?style=flat-square\" alt=\"npm downloads total\" \u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ngx-device-detector\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/ngx-device-detector.svg\" alt=\"npm downloads/month\" \u003e\u003c/a\u003e\u003cbr\u003e\u003cbr\u003e\nIf you use Angular 5, you must use v1.5.2 or earlier\n\u003c/p\u003e\n\n## DOCS\n\n[Ngx Device Detector DOCS](https://ahsanayaz.github.io/ngx-device-detector)\n\n## Live DEMO\n\n[Regular Demo](https://ahsanayaz.github.io/ngx-device-detector/demo)\n\n\u003c!-- [SSR Demo](https://ngx-device-detector-ssr.herokuapp.com/) --\u003e\n\n## Dependencies\n\nLatest version available for each version of Angular\n\n| ngx-device-detector | Angular |\n|---------------------|---------|\n| 1.3.3               | 7.x     |\n| 1.3.5               | 8.x     |\n| 1.4.1               | 9.x     |\n| 1.4.5               | 10.x    |\n| 2.0.5               | 11.x    |\n| 2.1.0               | 12.x    |\n| 3.x.x               | 13.x    |\n| 4.x.x               | 14.x    |\n| 5.x.x               | 15.x    |\n| 6.x.x               | 16.x    |\n| 7.x.x               | 17.x    |\n| 8.x.x               | 18.x    |\n| 9.x.x               | 19.x    |\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install ngx-device-detector --save\n```\n\nIn your component where you want to use the Device Service\n\n```typescript\n  import { Component } from '@angular/core';\n  ...\n  import { DeviceDetectorService } from 'ngx-device-detector';\n  ...\n  @Component({\n    selector: 'home',  // \u003chome\u003e\u003c/home\u003e\n    styleUrls: [ './home.component.scss' ],\n    templateUrl: './home.component.html',\n    ...\n  })\n\n  export class HomeComponent {\n    deviceInfo = null;\n    ...\n    constructor(..., private http: Http, private deviceService: DeviceDetectorService) {\n      this.epicFunction();\n    }\n    ...\n    epicFunction() {\n      console.log('hello `Home` component');\n      this.deviceInfo = this.deviceService.getDeviceInfo();\n      const isMobile = this.deviceService.isMobile();\n      const isTablet = this.deviceService.isTablet();\n      const isDesktopDevice = this.deviceService.isDesktop();\n      console.log(this.deviceInfo);\n      console.log(isMobile);  // returns if the device is a mobile device (android / iPhone / windows-phone etc)\n      console.log(isTablet);  // returns if the device us a tablet (iPad etc)\n      console.log(isDesktopDevice); // returns if the app is running on a Desktop browser.\n    }\n    ...\n  }\n\n```\n\nFor SSR, you have to make sure that the User Agent is available for device detection. I.e. you'll need to provide it manually. If using ExpressJS for example:\n\n**express.tokens.ts**\n\n```typescript\nimport { InjectionToken } from '@angular/core';\nimport { Request, Response } from 'express';\n\nexport const REQUEST = new InjectionToken\u003cRequest\u003e('REQUEST');\nexport const RESPONSE = new InjectionToken\u003cResponse\u003e('RESPONSE');\n```\n\n**universal-device-detector.service.ts:**\n\n```typescript\nimport { Inject, Injectable, Optional, PLATFORM_ID } from '@angular/core';\nimport { REQUEST } from 'path/to/express.tokens';\nimport { Request } from 'express';\nimport { DeviceDetectorService } from 'ngx-device-detector';\nimport { isPlatformServer } from '@angular/common';\n\n@Injectable()\nexport class UniversalDeviceDetectorService extends DeviceDetectorService {\n  constructor(@Inject(PLATFORM_ID) platformId: any, @Optional() @Inject(REQUEST) request: Request) {\n    super(platformId);\n    if (isPlatformServer(platformId)) {\n      super.setDeviceInfo((request.headers['user-agent'] as string) || '');\n    }\n  }\n}\n```\n\n**app.server.module.ts:**\n\n```typescript\n{\n  provide: DeviceDetectorService,\n  useClass: UniversalDeviceDetectorService\n},\n```\n\n## Device service\n\nHolds the following properties\n\n- browser\n- os\n- device\n- userAgent\n- os_version\n\n## Helper Methods\n\n- **isMobile() :** returns if the device is a mobile device (android / iPhone/ windows-phone etc)\n- **isTablet() :** returns if the device us a tablet (iPad etc)\n- **isDesktop() :** returns if the app is running on a Desktop browser.\n\n## Development\n\nTo generate all `*.js`, `*.js.map` and `*.d.ts` files:\n\n```bash\n  $ npm run tsc\n```\n\nTo lint all `*.ts` files:\n\n```bash\n  $ npm run lint\n```\n\nTo run unit tests\n\n```bash\n  $ npm run test\n```\n\nTo build the library\n\n```bash\n  $ npm run build\n```\n\n## Run the DEMO\n\nMake sure you have @angular/cli installed\n\n```bash\n  $ npm install -g @angular/cli\n```\n\n```bash\n  $ cd demo\n  $ npm install\n  $ ng serve\n```\n\nthe demo will be up at `localhost:4200`\n\n## Change Log\n\nPlease see [CHANGE_LOG.MD](CHANGE_LOG.MD) for the updates.\n\n## Credits\n\nThe library is inspired by and based on the work from [ng-device-detector ](https://github.com/srfrnk/ng-device-detector). Also used a typescript wrapper of the amazing work in [ReTree](https://github.com/srfrnk/re-tree) for regex based needs and an Angular2 Library Creator boilerplate to get the work started fast. I.e. [Generator Angular2 library](https://github.com/jvandemo/generator-angular2-library).\n\n## License\n\n[MIT](https://github.com/AhsanAyaz/ngx-device-detector/blob/master/LICENSE)\n\n## Need help with your Angular/Web projects\nWrite to us at [IOMechs](mailto:info@iomechs.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahsanayaz%2Fngx-device-detector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahsanayaz%2Fngx-device-detector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahsanayaz%2Fngx-device-detector/lists"}