Send SMS With NativeScript and Angular 2

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 using NativeScript and Angular 2 app. We will code an app from scratch, in it we will have two text fields, one will take a number and the other will take the text message and then when the user presses the send button, the app will send a SMS to the entered number. Sounds simple right, well it is.

 

Step 1)

We will start off by creating a new NativeScript app with Angular 2, we do that by executing the following command in command prompt/ terminal.

Notice here that I am creating the new app with Angular 2 using the --ng option.

Step 2)

Now that have created a new project and navigated inside it. We will add the nativescript-phone plugin using the following command.

The plugin can also be used to dial numbers as well. I encourage you to read the plugin docs for more.

For Android API 23 and up we will need to add the nativescript-permissions plugin. To add the plugin and run the following command

Also for Android API 23 and up you would need to add the following permission to the androidManifest.xml file

You can read on how to use the nativescript-permissions plugin in my “NativeScript Request Permissions For Android” tutorial, where I have gone in details to explain how to use the plugin and request the user for permissions.

 

Step 3)

In this step, we will add Android and iOS platforms to our app. Note that you can only add iOS as a platform if you are using MAC. We add platforms using the following commands

 

Step 4)

Now it is time to code up our app. As I mentioned, the app will have two text fields and a button. Open up app\app.component.html and code it as follows.

In the above code we have two text fields which have two way data binding to variables enteredNumber and enteredMessage. As you can guess by the name of the vatiables, one is for the phone number and another is for the SMS message.

We have set the keyboardType="phone" on the first TextField, this will make sure that the user can only enter a phone number. The button that we have will call the sendSMS() function as soon as it is tapped.

Notice that I have removed all the code that came with the starter app. We will do the same in the next step as well.

Step 5)

After coding our view, now it is time to code out TypeScript file. We will code the app\app.component.ts file as follows

Here on line 2 and 3 we are importing nativescript-permissions and nativescript-phone. To learn more about nativescript permissions, check out my previous post. We have declared the variables enteredNumber and enteredMessage on line 13 and 14.

On line 16 we start  our sendSMS() function, inside this function we are first reqesting the user for the permission using permissions.requestPermission(). If the permission is granted we are sending the SMS using TNSPhone.sms() .

A thing to note about the TNSPhone.sms() function is that it takes two arguments, phone number and the SMS message to send. The first argument that it takes which is the phone number, has to be an array of strings.

Hence, we are converting our number that we get from the user into an array of strings on line17 and 18. You can add multiple numbers as stings to the array and all of the numbers will be added as the recipient of the SMS.

 

Step 6)

As we have used ngModel in the view we will need to add NativeScriptFormsModule to our app.module.ts. If you are not using ngModel and getting the phone number and message some other way then you do not need to do this. So open up app\app.module.ts and make the following changes.

 

Step 7)

Now its time to run our app, we can do that by using the run or the livesync command as follows

Before running the commands make sure that you have your emulator running in the background or you have a device connected with debugging enabled.

 

Conclusion

Sending SMS using NativeScript is not a complicated task at all thanks to the nativescript-phone plugin. Keep one thing in mind that TNSPhone.sms() can accept multiple numbers to send SMS, but it does that in Array of strings format.

 

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

  • Mangesh Sangapu

    step two is missing this: tns plugin add nativescript-permissions

    • Thanks for the correction. Really appreciate it

      • Mangesh Sangapu

        Hi Prantik. I appreciate the tutorial and the quick update. I found another issue: I had to add within AndroidManifest.xml, otherwise the permissions prompt would not appear and I was seeing “Permission Denied!” within the console.

        However, with this addition, my Nexus 5 (running Android 6) does not actually send the SMS. It opens the default SMS app and has the message prepared. I have to click send again within the default SMS app. Is this expected behavior?

        • again thanks for the update. Will update the post.

        • Yes, this is expected. For security total control of the SMS app is not given to another app. It is the same behaviour that I got.

          Also, I found an issue with the success and failure call backs as well. I have opened an issue on github repo for the plugin here https://github.com/msywensky/nativescript-phone/issues/22#issuecomment-283543625

          • Mangesh Sangapu

            Thanks Prantik. I also commented on the github repo yesterday. Seems like it’s capturing the “back” event from exiting the native SMS app.

%d bloggers like this: