Skip to main content

How To Get Device Information In Ionic

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial, we will take a look at how you can get device info of the device running your app created in Ionic 3. Device info contains information such as the device UUID, version, platform, manufacturer etc.

Device information can be used in any way you want. For example, if your app is run on a device which has an older platform version you can show an alert asking the user to update the app. You can get the device UUID which is the Universally Unique Identifier to identify the device and the user.

For the sake of this tutorial, we will create an app that will display all the device info when a button is clicked.

Step 1)

Open up your terminal and issue the following command to create a new app.

This will create a project folder named deviceInfo. Make sure that you have navigated your terminal inside the project folder.

 

Step 2)

Now it’s time to add device info plugin to our app. We do that by running the following command.

We will need to also add the device module from ionic-native, we do that by running the following command.

 

Step 3)

It’s now time to add a platform. You can add iOS or Android by running the following command.

Note here that to add and run iOS you will need a MAC. You won’t be able to add iOS on windows or linux. Android on the other hand can be added across all platforms.

 

Step 4)

As I mentioned we will create a simple app that will display the device info when a button is clicked. As we are using the blank template, open up src\pages\home\home.html and code it as follows.

Here we have a button that will call function getInfo() when the button is tapped on. The device information will be displayed with  {{deviceInfo | json}}

Step 5)

Now let’s code up the functionality for the button. We do that in src\pages\home\home.ts as follows.

Here we are importing the device module on line 3 and injecting in the constructor on line 24. When the getInfo() function is called we are assigning all the info that we get to the deviceInfo object.

Step 6)

As we are using the device module we will need to inject it into our app.modules.ts file. Doing so will make it available for use in our app otherwise, will give us an error. We will make the following changes to src\app\app.modules.ts

Here we are importing the device module on line 9 and adding it to the providers array on line 27.

 

Step 7)

Now we can run our app on a device or emulator by running the following command.

Issuing the above command will run our app in default Android or iOS emulator or will run the app to a connected device.

 

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Federico Dassatti

    how can i use the uuid in functions for Firebase Cloud Messaging…. I need to write an exports….. in Index.js and can’t call uuid……

    • What are you trying to do can you please elaborate?
      Are you trying to store the uuid to firebase? You can store it as string easily.

      You have to work with the .ts file and not the .js files in ionic

%d bloggers like this: