Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AhsanAyaz/ngx-device-detector
An Angular v7+ library to detect the device, OS, and browser details.
https://github.com/AhsanAyaz/ngx-device-detector
angular device-detection device-detector ng5 ngx-device-detector
Last synced: 25 days ago
JSON representation
An Angular v7+ library to detect the device, OS, and browser details.
- Host: GitHub
- URL: https://github.com/AhsanAyaz/ngx-device-detector
- Owner: AhsanAyaz
- License: mit
- Created: 2016-11-08T08:23:44.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-11-20T15:08:43.000Z (about 1 year ago)
- Last Synced: 2024-05-02T02:08:34.523Z (7 months ago)
- Topics: angular, device-detection, device-detector, ng5, ngx-device-detector
- Language: TypeScript
- Homepage: https://ahsanayaz.github.io/ngx-device-detector
- Size: 14.2 MB
- Stars: 507
- Watchers: 20
- Forks: 100
- Open Issues: 30
-
Metadata Files:
- Readme: README.MD
- Changelog: CHANGE_LOG.MD
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-device-detector - An Angular v7+ library to detect the device, OS, and browser details. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-device-detector - An Angular v7+ library to detect the device, OS, and browser details. (Table of contents / Third Party Components)
README
An 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 KoderLabs, which is one of the best places I've worked at ❤️
New package :
If you use Angular 5, you must use v1.5.2 or earlier
## DOCS
[Ngx Device Detector DOCS](https://ahsanayaz.github.io/ngx-device-detector)
## Live DEMO
[Regular Demo](https://ahsanayaz.github.io/ngx-device-detector/demo)
## Dependencies
Latest version available for each version of Angular
| ngx-device-detector | Angular |
|---------------------|---------|
| 1.3.3 | 7.x |
| 1.3.5 | 8.x |
| 1.4.1 | 9.x |
| 1.4.5 | 10.x |
| 2.0.5 | 11.x |
| 2.1.0 | 12.x |
| 3.x.x | 13.x |
| 4.x.x | 14.x |
| 5.x.x | 15.x |
| 6.x.x | 16.x |
| 7.x.x | 17.x |
| 8.x.x | 18.x |
## Installation
To install this library, run:
```bash
$ npm install ngx-device-detector --save
```
In your component where you want to use the Device Service
```typescript
import { Component } from '@angular/core';
...
import { DeviceDetectorService } from 'ngx-device-detector';
...
@Component({
selector: 'home', //
styleUrls: [ './home.component.scss' ],
templateUrl: './home.component.html',
...
})
export class HomeComponent {
deviceInfo = null;
...
constructor(..., private http: Http, private deviceService: DeviceDetectorService) {
this.epicFunction();
}
...
epicFunction() {
console.log('hello `Home` component');
this.deviceInfo = this.deviceService.getDeviceInfo();
const isMobile = this.deviceService.isMobile();
const isTablet = this.deviceService.isTablet();
const isDesktopDevice = this.deviceService.isDesktop();
console.log(this.deviceInfo);
console.log(isMobile); // returns if the device is a mobile device (android / iPhone / windows-phone etc)
console.log(isTablet); // returns if the device us a tablet (iPad etc)
console.log(isDesktopDevice); // returns if the app is running on a Desktop browser.
}
...
}
```
For 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:
**express.tokens.ts**
```typescript
import { InjectionToken } from '@angular/core';
import { Request, Response } from 'express';
export const REQUEST = new InjectionToken('REQUEST');
export const RESPONSE = new InjectionToken('RESPONSE');
```
**universal-device-detector.service.ts:**
```typescript
import { Inject, Injectable, Optional, PLATFORM_ID } from '@angular/core';
import { REQUEST } from 'path/to/express.tokens';
import { Request } from 'express';
import { DeviceDetectorService } from 'ngx-device-detector';
import { isPlatformServer } from '@angular/common';
@Injectable()
export class UniversalDeviceDetectorService extends DeviceDetectorService {
constructor(@Inject(PLATFORM_ID) platformId: any, @Optional() @Inject(REQUEST) request: Request) {
super(platformId);
if (isPlatformServer(platformId)) {
super.setDeviceInfo((request.headers['user-agent'] as string) || '');
}
}
}
```
**app.server.module.ts:**
```typescript
{
provide: DeviceDetectorService,
useClass: UniversalDeviceDetectorService
},
```
## 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.
## Development
To generate all `*.js`, `*.js.map` and `*.d.ts` files:
```bash
$ npm run tsc
```
To lint all `*.ts` files:
```bash
$ npm run lint
```
To run unit tests
```bash
$ npm run test
```
To build the library
```bash
$ npm run build
```
## Run the DEMO
Make sure you have @angular/cli installed
```bash
$ npm install -g @angular/cli
```
```bash
$ cd demo
$ npm install
$ ng serve
```
the demo will be up at `localhost:4200`
## Change Log
Please see [CHANGE_LOG.MD](CHANGE_LOG.MD) for the updates.
## Credits
The 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).
## License
[MIT](https://github.com/AhsanAyaz/ngx-device-detector/blob/master/LICENSE)
## Sponsorship
If you like the library and want to support, you can do it by buying me a coffee at
