Ionic provides the ionic native version of cordova-plugin-deviceas @ionic-native/device.
Here at Ibmi Media, as part of our Server Management Services, we regularly help our Customers to perform App related tasks.
In this context, we shall look into how to find the device version & name in Ionic.

The process of Getting Device version and Device Name in Ionic ?

Getting the Device version and Device Name in Ionic is quite simple. First, we need to create an Ionic App and install Device plugins. Finally, we create a service.
Ionic provides the Ionic Native version plugins for getting the Device version and Device name. Below are some of the information, the Native plugin Cordova-plugin-device/@ionic-native/device can provide related to the device.

i. Cordova – To get the version of Cordova running on the device.
ii. Model – The device.model returns the name of the device’s model or product. The value is set by the device manufacturer. However, may be different across versions of the same product.
iii. Platform – Get the device’s operating system name.
iv. Uuid – Get the device’s Universally Unique Identifier (UUID).
v. Version – Get the operating system version.
vi. Manufacturer – Get the device’s manufacturer.
vii. IsVirtual – Whether the device is running on a simulator.
viii. Serial – Get the device hardware serial number.

In order to get the device name, you have to install another plugin cordova-plugin-device-name.

Below are the steps for it.

How to Create a new Ionic Application ?

First, we need to create an Ionic application using the latest Ionic CLI. So, we run the below command.

$ npm install -g @ionic/cli

Next, we create a new Angular Ionic blank application. So, we run the below command.

$ ionic start Device blank –type=angular

How to Install Device plugins ?

1. First, we install cordova-plugin-device/@ionic-native/device. For that, we execute the below commands.

$ ionic cordova plugin add cordova-plugin-device

$ npm install --save @ionic-native/device

2. Next, we install cordova-plugin-device-name by executing the below command.

$ ionic cordova plugin add cordova-plugin-device-name

How to Create a service for getting Device version and Device Name ?
Now we create DeviceService to get the device details. So, we run the below command.

$ ionic g service Device

To get the device name, device version, and device UUID, device platform we change the device service as follows;

import { Injectable } from '@angular/core';

import { Platform } from '@ionic/angular';

import { Device } from '@ionic-native/device/ngx';

@Injectable({

providedIn: 'root'

})

export class DeviceDetailsService {

name: string = "";

osVersion: string = "";

uuid: string = "";

platform: string = "";

constructor( private plt: Platform, private device: Device) {

this.plt.ready().then(() => {

this.osVersion = this.device.version;

this.uuid = this.device.uuid;

this.name = (window as any).device.name;

this.platform = device.platform;

});

}

}

Then we make changes in the app.module to import the plugins.

import { NgModule,} from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { SplashScreen } from '@ionic-native/splash-screen/ngx';

import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';

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

import { Device } from '@ionic-native/device/ngx';

@NgModule({

declarations: [AppComponent],

entryComponents: [],

imports: [BrowserModule,

AppRoutingModule,

],

providers: [

StatusBar,

SplashScreen,

Device

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

],

bootstrap: [AppComponent]

})

export class AppModule { }

Finally, when we open the app, the device details will be fetched and it can be stored using local storage. Or else it can be stored in any other location.

[Still trying to get the Device version & Name of App on Ionic? – Our experts can help you. ]