GitXplorerGitXplorer
A

ngx-device-detector

public
528 stars
103 forks
32 issues

Commits

List of commits on branch master.
Unverified
483af4627bf0ee139d1136f8653827ab53d71b60

chore(angular): update to v19

committed a month ago
Unverified
ffe9768c8c06f55e0bcb7e22bbc7ca15eb7b7600

chore(logo): update logo svg

AAhsanAyaz committed 7 months ago
Unverified
61ee577e60f2b91ca0934f8f04dcf04f29dbd834

build(8.0.0): release 8.0.0 :rocket:

AAhsanAyaz committed 7 months ago
Unverified
904817b092421e37c67edb803ab02b39376680b9

revert(package.json): revert the package version in favor of automation

AAhsanAyaz committed 7 months ago
Verified
ebf9c1ddf259411444827c6690a2394a385c773f

Merge pull request #291 from giuseppemorale/feature/angular-18

AAhsanAyaz committed 7 months ago
Unverified
a2928449e03d47a2a3d93dcc7818fa5ed6d09a12

ncu completed

ggiuseppemorale committed 7 months ago

README

The README file for this repository.

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 ❤️

build status npm version license stars

Deprecated package : npm downloads total npm downloads/month

New package : npm downloads total npm downloads/month

If you use Angular 5, you must use v1.5.2 or earlier

DOCS

Ngx Device Detector DOCS

Live DEMO

Regular 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
9.x.x 19.x

Installation

To install this library, run:

$ npm install ngx-device-detector --save

In your component where you want to use the Device Service

  import { Component } from '@angular/core';
  ...
  import { DeviceDetectorService } from 'ngx-device-detector';
  ...
  @Component({
    selector: 'home',  // <home></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

import { InjectionToken } from '@angular/core';
import { Request, Response } from 'express';

export const REQUEST = new InjectionToken<Request>('REQUEST');
export const RESPONSE = new InjectionToken<Response>('RESPONSE');

universal-device-detector.service.ts:

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:

{
  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:

  $ npm run tsc

To lint all *.ts files:

  $ npm run lint

To run unit tests

  $ npm run test

To build the library

  $ npm run build

Run the DEMO

Make sure you have @angular/cli installed

  $ npm install -g @angular/cli
  $ cd demo
  $ npm install
  $ ng serve

the demo will be up at localhost:4200

Change Log

Please see CHANGE_LOG.MD for the updates.

Credits

The library is inspired by and based on the work from ng-device-detector . Also used a typescript wrapper of the amazing work in ReTree for regex based needs and an Angular2 Library Creator boilerplate to get the work started fast. I.e. Generator Angular2 library.

License

MIT

Need help with your Angular/Web projects

Write to us at IOMechs