Monday, May 21, 2018

Angular 4 - How to detect device in browser

Its very simple and straight forward to use plugin for Angular 4 typescript as below

Use plugin https://www.npmjs.com/package/ngx-device-detector which can be added to package.json to install as reference

Include in your app.module as below

import { DeviceDetectorModule } from 'ngx-device-detector';


imports: [
      DeviceDetectorModule.forRoot()
    ],

Include in your component or service as below


import { DeviceDetectorService } from 'ngx-device-detector';

constructor(private deviceService: DeviceDetectorService) {   }

To get device info use as below in component

this.deviceService.getDeviceInfo();  //This will get all device useragent info 
this.deviceService.isTablet(); //This will get device is tablet or not
this.deviceService.isDesktop(); //This will get device is desktop or not
this.deviceService.isMobile(); //This will get device is mobile or not