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

 

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

 

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 in the background.

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)

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