• Stars
    star
    471
  • Rank 93,216 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An Angular v7+ library to detect the device, OS, and browser details.

ngx-device-detector

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.

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

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.
    }
    ...
  }

To ensure Universal has the correct User Agent for device detection, you'll need to provide it manually. If using ExpressJS for example:

universal-device-detector.service.ts:

import { Inject, Injectable, Optional, PLATFORM_ID } from '@angular/core';
import { REQUEST } from '@nguniversal/express-engine/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

Sponsorship

If you like the library and want to support, you can do it by buying me a coffee at

More Repositories

1

angular-deploy-gh-pages-actions

Github actions to automagically deploy your angular app to GitHub pages.
HTML
56
star
2

flutter_contacts_list

Dart
54
star
3

flutter_stripe_payments

Dart
47
star
4

typescript-tailwind-webpack-starter

A modern Webpack 5, Tailwind CSS 3, and TypeScript Web Apps Starter Template
JavaScript
32
star
5

ng2-emoji

An Angular2-TypeScript emoticons library
TypeScript
25
star
6

fun-with-javascript

JavaScript
21
star
7

node-emails-from-csv

A simple NodeJS aplication that helps sending emails for events. Uses CSV files for target users.
HTML
19
star
8

flutter_stripe_connect

An example repository to teach how to implement a marketplace with Stripe Connect & Flutter.
Dart
18
star
9

code-with-ahsan

JavaScript
17
star
10

zubaan-gemini-nano

A web application demonstrating translations and summarization with Google Gemini Nano (on-device model)
TypeScript
16
star
11

angular-elements-demos

Demo apps / widgets based on angular elements (custom elements)
HTML
15
star
12

ng-2048

The 2048 game built with Angular & Tailwind CSS
TypeScript
13
star
13

ng2-hz-datepicker

A Horizontal Datepicker for angular 2 with horizontal scrolling
TypeScript
11
star
14

cordova-app-crash

A simple enough cordova plugin to crash app on demand (for testing)
Java
9
star
15

angular-fastify-starter

Angular4 , Fastify & MongoDB sample app with basic CRUD showcasing Fastify's features
JavaScript
9
star
16

ng-key-list-demo

TypeScript
7
star
17

stripe-connect-backend

JavaScript
7
star
18

ng-fun-windows

A fun experiment with multi-browser-windows twitter trend
HTML
7
star
19

angular4-rockstar-chat-ngrx

An example app based on Angular4, Angular Cli and NgRx for state management.
TypeScript
6
star
20

sigma-memer

TypeScript
6
star
21

marvel-heroes

marvel-heroes demo app for Angular Architecture Session
TypeScript
5
star
22

node-redis-auth

HTML
4
star
23

ngx-read-time

TypeScript
4
star
24

ng-cookbook

HTML
4
star
25

npm-ahsanayaz

Business card
JavaScript
4
star
26

ionic-el-scroll

JavaScript
4
star
27

ng-traffic-ci

A simple application built on Angular that demonstrates a traffic signal with standard lights. The purpose was to demonstrate integration of Travic CI with an Angular app/project.
TypeScript
4
star
28

mini-udemy

HTML
3
star
29

ng-signals-v17

TypeScript
3
star
30

async-await-node-example

JavaScript
3
star
31

angular-in-90ish

This repository contains the slides, and the app for the "Angular Crash Course | Learn Angular in 90 minutes" tutorial
TypeScript
3
star
32

ngrx-workshop

A detailed workshop on ngrx covering the main concepts with an example app
TypeScript
2
star
33

storybook-related-links

JavaScript
2
star
34

angular4-rockstar-chat

A sample application using Angular4, Bootstrap, Angular CLI and @ngrx/store
TypeScript
2
star
35

next-rendering-compared

A demonstration of nextjs's core concepts including CSR, SSR, SSG, and some gotchas with a youtube video
TypeScript
2
star
36

chrome-ext-restream-mate

JavaScript
2
star
37

flutter_drawer_animation

Dart
2
star
38

flutterfly

A simple example for getting started with Flutter
Dart
2
star
39

solidjs-rest-api-client

TypeScript
2
star
40

my-portfolio

HTML
2
star
41

projects.ahsanayaz.com

TypeScript
2
star
42

angular-cfi

https://ahsanayaz.github.io/angular-cfi
TypeScript
2
star
43

mini-udemy-draft

TypeScript
1
star
44

ng-github-lighthouse-ci

HTML
1
star
45

your-courses-library

TypeScript
1
star
46

ng-signals-input

TypeScript
1
star
47

slides

JavaScript
1
star
48

frameworks-war

Code sample for my recent talk about Zero to app in 20 minutes with Firebase and Angular
TypeScript
1
star
49

ng-custom-form-control

Repository for the tutorial on Angular Custom Form Controls
TypeScript
1
star
50

ng2-hz-datepicker-example

Examples of using ng2-hz-datepicker component
TypeScript
1
star
51

js-sync-async-workshop

JavaScript
1
star
52

ZeitChat-backend

TypeScript
1
star
53

flutter_stripe_tto

Dart
1
star
54

ahsanayaz

ahsanayaz.com | Info and Blog
JavaScript
1
star
55

angular-change-detection

TypeScript
1
star
56

flutter_custom_material_color

Dart
1
star
57

hu-mean

TypeScript
1
star
58

react-versioning-app

JavaScript
1
star
59

cillers-nlp-example

Python
1
star
60

stream-drop

A game to be shown on the stream
TypeScript
1
star
61

reveal-multi-slides-template

JavaScript
1
star