Ionic 2 Beginner : Send SMS With Ionic 2 And Cordova SMS Plugin

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 I will show you how you can send SMS with Ionic 2 Apps we will be using the Cordova SMS plugin for that. We will create a button which when tapped will send and SMS. In this Tutorial we will be using the Ionic blank template.

I already have a Tutorial on How To Send SMS With Ionic Framework And ngCordova which is for Ionic 1.x apps. But as Ionic has now evolved to a new version namely Ionic 2 we need to do things differently which we will see in here.

A thing to note before we begin is that this plugin is capable of just sending messages for Android, iOS and WP8. For Android if you want the ability to read and send messages then you should read my latest post here.

Step 1)

We will start off by creating out project with the blank template, so open up your command prompt and run the following commands

Now let’s add Android and iOS platforms to our project.

 

Step 2)

We will now add the cordova-sms-plugin we do that by running the following command in our command prompt

Also, we need to add the Ionic native module provider for it as well, we do that as follows

Step 3)

Now we are ready to get started with our code, so open up app/pages/home/home.html in your favorite text editor and we will create a button like so

Note that we are adding a (click) event to the button and calling the sendSMS() function

 

Step 4)

It’s now time to create the sendSMS() function which we wired up to our button in the previous step, we do that in app/pages/home/home.ts file the following way

First, I am injecting the SMS class into the constructor by doing private smsVar: SMS, we can now use the instance of the class using this.smsVar to access it’s methods.

Here we are hard coding the number and message on line 23 you can use two-way data binding and get the number and message from the user but for the sake of simplicity, I am hard coding it here.

On line 16 we have options for android set to intent: 'INTENT' what this means is that when the user taps on the button the default SMS App for the device will open up and then the user will have to tap the send button in the default app in order to send the SMS. If we do intent: '' then the SMS will be sent in the background without an additional step. This is only true for android, for iOS SMS will always be sent by passing control to the default SMS app, See this issue here.

The promise of the SMS.send() method has success and failure callbacks. These callbacks are triggers on the success and failure to pass the data to the default SMS app. They are not triggered on whether SMS has been sent or not. For example, if you press send then the app passes the data to the default SMS app, and if there is a network issue or for some reason the SMS does not get sent, the callback will still return a success as the app was able to pass data to the default app.

 

Step 5)

We will need to add the SMS module to either our component or the entire app module. Here, I will add it to the entire app module. So, open up src\app\app.module.ts

 

Step 6)

The final step is to test our app in an emulator or on a device, You need to have USB debugging turned on for this. We will build and install our app we do that be running the following command

For Android

For iOS

Note:

This plugin will not work in the browser. You will need to install the app on a device and run the app for this to work.

 

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

  • lorosukmo

    This second version seems more easily understood than before..
    thx..

  • Mardi anto

    Thanks 🙂 Do you know how to make read sms?

  • Patrice

    I tried it but I am using typescript with angular2 and “sms.send” can not be recognized? I don’t know what to do. Is there anything to import? Do you have a sample code that works?

    Thanks

    • This will not work in the browser so you need to install in on a device for this to work.
      I have uploaded the code on github here https://github.com/pointdeveloper/Ionic-2-Send-SMS

      • Patrice

        Well I am using Typescript and your code is not. That is the point that I am trying to solve. What definition files should I download, should I make any import statements in my code so that I don’t have typing issues?

        • I am leaning TypeScript myself and i am at a very beginner level so i wont be able to solve your typescript issues.

          But form what i can tell about the error is that, the “sms.send” cannot be recognized error comes when the plugin is being called BEFORE the platform ready event.

          Rather than using Angular 2 directly you should consider using IONIC 2 which will handle the platform ready event for you.

          Here is a Angular 1 example that should make things clear http://stackoverflow.com/questions/21556090/cordova-angularjs-device-ready

          Thanks

  • Pingback: Sending SMS With Ionic 2 App For Android - pointDeveloper.com()

  • egghead27

    Hi i tried to run your code, but i have a white screen on my android device. The install has succeded
    Have you already met the same issue ?
    thank you

  • Luís Siza Jó

    its working for me, thanks a lot

    • Martin Leong

      Are you using android or iPhone?

      I worked on the tutorial using an iPhone. I encountered the following problem:
      When testing the app on the iPhone, the app actually launched iPhone’s native SMS app with the message. It is possible send the message without launching the native SMS app?

      • Hey there martin,
        Thanks a lot for writing in, I have worked only in android. I had someone else test out the iOS side of things for me. As a result, there was some inaccurate info in the post. iOS can only send sms using the native app only.

        See this plugin issue here :https://github.com/cordova-sms/cordova-sms-plugin/issues/35

        I have updated the post accordingly.

        Regards,

        -Prantik vaghela

        • Martin Leong

          Thanks for providing the clarification. Cheers!

  • Martin Leong

    Hi there. I worked on the tutorial using an iPhone. I encountered the following problem:
    When testing the app on the iPhone, the app actually launched iPhone’s native SMS app with the message. It is possible send the message without launching the native SMS app?

  • Golda-Lee Sawyers

    Works like a charm. Thank You.

  • sudesh goyat

    Hey is there any code for otp generation in ionic 2

    • OTPs are generated on the server and sent to the user via sms or email. There are a lot of libraries our there that will generate otp depending on the type of server you are running. You just have to send the sms and ask the user to enter the otp.

      • sudesh goyat

        ok..thnx fr the reply..

  • Naresh Kukreti

    Thanks it’s working. But can you tell me how to select sim before sending messages??

    • Dual sim is not supported as you can see form this issue here https://github.com/cordova-sms/cordova-sms-plugin/issues/49

      If you are setting intent: ‘INTENT’ then the native SMS app will open up, there the user can choose the SIM they want to send the SMS with. Other than that there are no ways currently. I am also in search of such an option but have not found it.
      You can track the issue to see if and when it get implemented.

      Regards.
      -Prantik

      • Naresh Kukreti

        OK. Thanks for your response.

        • Naresh Kukreti

          Can we mark SMS read or unread?

      • Naresh Kukreti

        Thanks.

      • Naresh Kukreti

        Do you know how to mark sms as read?

        • There is no way to do that as the plugin does not allow that.

  • Gopi Krishna Surisetti

    Hi i have tried using this code But i am unable to get the message i am getting the failure toast simultaneously in android device.could you please tell me the best way to achieve this.

%d bloggers like this: