
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
2. Implement Angular device detector
2.1 Include DeviceDetectorModule in app.module.ts
Open your app.module.ts and Import DeviceDetectorModule
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {DeviceDetectorModule} from 'ngx-device-detector'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, DeviceDetectorModule.forRoot() ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
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
This is what getDeviceInfo() is giving you back :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { Component } from '@angular/core'; import { DeviceDetectorService } from 'ngx-device-detector'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public deviceInfo = null; constructor( private deviceService: DeviceDetectorService) { this.detectDevice(); } public detectDevice() { this.deviceInfo = this.deviceService.getDeviceInfo(); } } |
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.
This is the whole project except app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import { Component } from '@angular/core'; import { DeviceDetectorService } from 'ngx-device-detector'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public deviceInfo = null; public isMobilevar = false; public isTabletvar = false; public isDesktopvar = false; constructor( private deviceService: DeviceDetectorService) { this.detectDevice(); this.isMobile(); this.isTablet(); this.isDesktop(); } public detectDevice() { this.deviceInfo = this.deviceService.getDeviceInfo(); } public isMobile() { this.isMobilevar = this.deviceService.isMobile(); } public isTablet() { this.isTabletvar = this.deviceService.isTablet(); } public isDesktop() { this.isDesktopvar = this.deviceService.isDesktop(); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<h2>Device Info</h2> {{ deviceInfo | json }} <br> <br> <br> <br> <h2>Other functions</h2> Am I mobile = {{isMobilevar}} <br> <br> Am I a tablet = {{isTabletvar}} <br> <br> Am I a Desktop = {{isDesktopvar}} |
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
I cannot thank you enough for the post.Really looking forward to read more. Cool.