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.

Here at Bobcares, we have seen several such App-related queries as part of our Development Services for developers.

Today, we will take a look at how to find the device version & name in Ionic.

Getting Device version and Device Name in Ionic

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.

• Cordova – To get the version of Cordova running on the device.
• 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.
• Platform – Get the device’s operating system name.
• Uuid – Get the device’s Universally Unique Identifier (UUID).
• Version – Get the operating system version.
• Manufacturer – Get the device’s manufacturer.
• IsVirtual – Whether the device is running on a simulator.
• Serial – Get the device hardware serial number.

In order to get the device name, we have to install another plugin cordova-plugin-device-name. Here are the steps for it.

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

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

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, not able to get the Device version & Name? – Our experts can help you]

Conclusion

Today, we saw how our Engineers get the Device’s version & Name in Ionic