Skip to main content

Get Sim Card Info In Your Ionic App

In this tutorial, we will take a look at how you can get sim info in your Ionic framework app. In the example that I am about to show you will work for dual sim phones as well.

As this is a tutorial we will code up an app from scratch. Our app will have a button and when we tap that button we will get info from all the sim cards displayed on our screen.

Step 1)

We will start off my creating a new ionic app. We do that by running the following command.

Step 2)

We will now install the cordova-plugin-sim plugin and the ionic native wrapper for it. We do that by the following command.

Now that we have added the sim card plugin and the native wrapper. We will need to add the SIM module to our app.module.ts file. So open up app/app.module.ts and add it as follows.

 

Step 3)

Now let’s go ahead and code up or functionality for our app. Open up src/pages/home/home.ts and code it as follows.

In the above code, we are first importing the sim class and injecting it into our constructor. We have a function called getSimData(), which is an Async function. You can read more about Async-Await here.

Before we get sim info we will need to get permission from the user to do so, we are doing that by this.sim.requestReadPermission(). This will return a promise, as we are using Async-Await we will get the resolved data of the promise in the variable simPermission. If the permission is granted then we will get a string OK back, we are checking for it inside the if condition.

After we have checked that the user has granted the permission we are getting the sim card info by doing this.sim.getSimInfo().  This will also return a promise, we are storing the resolved data of this promise in the simInfo public variable.

The JSON data that we get is pretty extensive, you can read more about the data here in the docs. The data contains an array or objects stored under the key cards. This array will have data for each sim in it. We are extracting and storing this data in the variablethis.cards by doing  this.cards = simData.cards;.

I urge you to read the docs and get more information about the data that is returned and use it in your app accordingly.

 

Step 4)

Now that we have our data in public variables simInfo and card it’s time to display that data. So open up src/pages/home/home.html and code it as follows.

Here we are displaying the data for each sim as an ion-card using a for loop. Here I am displaying only a handful of properties but as I said to refer the docs and pick what you need.

Step 5)

Using sim card plugin and getting sim card info is something that will not work in the browser. You will need to test this on a real device. To do that you will need to add a platform to your app. You can add platforms to your app by running the following command.

or for iOS

 

Now you can test your app on a connected device which has developer mode enabled by running the following command.

or for iOS

 

Conclusion

Form detecting the network type, to detecting the country code, to detecting the roaming state, there are many ways in which you can coustomize your apps using the sim card plugin. As mentioned that the data that the plugin gives you is pretty extensive and has a lot of different values to it. So make sure you study the response data that you get back thoroughly before implementing it in your project.

 

Download Code:

Code Will Be Sent Via Email

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. :-)