Device detector Angular – Brief tutorial

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

Table of Contents

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

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

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 :

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();
  }

}

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

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();
  }
}

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();

}

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

<h2>Device Info</h2>

<br>

<h2>Other functions</h2>

Am I mobile = {{isMobilevar}}

<br>

Am I a tablet = {{isTabletvar}}

<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

This may also be intersting for you:

Typescript Iterations - Brief and simple explanation

Creating an REST Api Documentation - RAML Tutorial

What is NodeJs - Getting startet with it

Device detector Angular – Brief tutorial

1. Install Angular device detector

2. Implement Angular device detector

2.1 Include DeviceDetectorModule in app.module.ts

2.2 Include DeviceDetectorModule where you want to use the Module

This may also be intersting for you:

1 thought on “Device detector Angular – Brief tutorial”

Leave a Reply Cancel reply