Send SMS With NativeScript and Angular 2

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.



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 @uncutAcademy
Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:
Prantik Vaghela

Prantik Vaghela (uncutAcademy)

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