Device detector Angular – Brief tutorial

Categories Angular 4, Blog Posts, Typescript
device detector

Hello everyone this is a brief Tutorial on how to detect the device where angular is running on.

This Module is made by KoderLabs https://github.com/KoderLabs

Ngx-device-detector is an Angular5+ library to detect the device it can also detect OS and showing you some browser details.

So let´s start of by installing the Module for your Angular App.

Totally reading time 5 Minutes


1. Install Angular device detector

First install the module via npm Package manger. Direct to your angular root folder and type in npm install ngx-device-detector –save

device_detector_01


2. Implement Angular device detector

2.1 Include DeviceDetectorModule in app.module.ts

Open your app.module.ts and Import DeviceDetectorModule

device_detecor_02

Now the Device Detector is included to our project its time to use it now.

2.2 Include DeviceDetectorModule where you want to use the Module

Open your component .ts file where you want to implement the Module.

In my case its app.component.ts. Import DeviceDetectorModule and also be sure to declare the deviceService in the constructor. Also call the function getDeviceInfo() and store it in an Object.

This object will contain following data:

  • Browser
  • Os
  • Device
  • userAgent
  • os_version

device_detector_03

This is what getDeviceInfo() is giving you back :

device_detector_04

You can also directly ask if the device you currently running angular is an Mobile device or an tablet or a Desktop.

This module got following fucntions for you  isMobile(), isTablet() and isDesktop();

This function give back a boolean wether the device angular is running on is mobile tablet or a Destop PC.

device_detector_05

device_detector_06

This is the whole project except app.module.ts

Hope you enjoyed this tutorial if so let me know and leave a comment downstairs.

Hope you have all a good day.

Credit for this Module goes to https://github.com/KoderLabs/ngx-device-detector

 

 

1 thought on “Device detector Angular – Brief tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *