@jfkz/ngx-toolkit-device

@ngx-toolkit/device

Angular Device detection for Browser & Server platforms

Table of contents:

• Installation
• Usage
• API
  • Device
• Universal Usage
• License

Installation

Install the npm package.

# To get the latest stable version and update package.json file:
npm install @ngx-toolkit/device --save
# or
yarn add @ngx-toolkit/device

Registered DeviceModule in the root Module of your application with forRoot() static method.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DeviceModule } from '@ngx-toolkit/device';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [ BrowserModule, DeviceModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Usage

import { Component, OnInit, Inject } from '@angular/core';
import { DEVICE, Device } from '@ngx-toolkit/device';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
  constructor(@Inject(DEVICE) device: Device) {
    console.log(device.isMobile());
  }

}

API

Device

The Device API:

enum DeviceType {
  TABLET,
  MOBILE,
  NORMAL
}

enum DevicePlatform {
  ANDROID,
  IOS,
  UNKNOWN
}

interface Device {
  type: DeviceType;
  platform: DevicePlatform;

  isNormal(): boolean;
  isMobile(): boolean;
  isTablet(): boolean;
}

Universal Usage

You just have to provide an UserAgent.

Sample with @nguniversal/express-engine:

import { NgModule }      from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { REQUEST } from '@nguniversal/express-engine';
import { USER_AGENT } from '@ngx-toolkit/device';

import { AppModule }  from './app.module';
import { AppComponent }  from './app.component';

export function userAgentFactory(request: any) {
  return request.get('User-Agent');
}

@NgModule({
  imports: [ AppModule, ServerModule ],
  bootstrap: [ AppComponent ],
  providers: [
    {
      provide: USER_AGENT,
      useFactory: userAgentFactory,
      deps: [REQUEST]
    }
  ],
})
export class AppServerModule { }

License

© 2018 Dewizz

MIT