GitXplorerGitXplorer
A

ngx-device-detector

public
528 stars
103 forks
32 issues

Commits

List of commits on branch master.
Unverified
08017a47144ce367177f82083adf126643042130

fix(readme): update iomechs mailto link

committed a month ago
Unverified
a8bbaf1a8b1ae953a463810f87aef04661a38a63

fix(readme): update iomechs logos

committed a month ago
Unverified
88c1ebff4e79ae3274c83030a79f08267be3c3c2

chore(readme): update readme

committed a month ago
Unverified
97f6cc51fb11832c18c281d7692ed96d0496acf6

fix(demo): fix building demo app

committed a month ago
Unverified
e8896132469bffd075c52ae729257702711e491b

release(9.0.0): Angular 19 support

committed a month ago
Unverified
a9f1eac36750e8dbdad0fd9849e34792fab67bef

chore(angular): add ssr

committed a month 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