Skip to main content

Dial A Number Using 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, we will see how to dial a number using a NativeScript and Angular 2. We will create our app from scratch, we will have a text field that will only accept numbers following it, we will have a button which when tapped will dial the number entered in the text field. You can choose to hard code the number if you want but I just wanted to show how it can be done by getting the number from the user.

Step 1)

We will start off by creating our app, we will do that by issuing the following command in the command prompt/terminal.

Here I am creating a new NativeScript app using the --ng option, this will create the app using Angular2.

 

Step 2)

Now let’s go ahead and add the nativescript-phone plugin. We do that by executing the following command.

I suggest that you read the docs of the plugin for more information.

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)

As mentioned above, we will be getting the number to dial from the user. To do that we will need to have an input field in our view. So open up app\app.component.html and code it as follows.

Here, we have removed all the code that came along with the starter template. We have created a TextField with keyboardType="phone" this will make the text field accept only phone numbers. We also have a button, tapping it will call the dialNumber() function.

A thing to note here is that we are using ngModel to bind the input from the user in our view to the code behind (the JavaScript/TypeScript code).

 

Step 5)

Now it is time to code the functionality for our app. So open up app\app.component.ts and code is as follows.

Here we have again removed the code that came with the starter template. We have imported nativescript-permissions and nativescript-permissions plugin in line 2 and 3. Also on line 4 we have declare var Android.

Starting from line 13 we have our dialNumber(). Inside the function, we are first requesting first for the permission to make the call from the user. If the permission is granted we are dialing the number on line 19. You can read more about the permission plugin in my pervious post.

A thing to note here is that the plugin expects the phone number to be a string, this is because a phone number can have alpha-numeric characters such as # or *. Such characters are often used for USSD numbers. So we are converting the number to a string using String(this.enteredNumber).

The second parameter is passed as false, doing so will open the dialer pad and have the number typed-in. The user will then have to hit the dial button to actually make the call.  If you want to directly dial the number by-passing the dialer, then set the second parameter to true.

NOTE: If you are setting the second parameter to false, then it is not necessary to request for the user’s permission. But if you set it to true then it becomes necessary to have access to theCALL_PHONE permission.

Step 6)

As we are using ngModel in our view to bind data through the enteredNumber variable, we will need to add the NativeScriptFormsModule to our app. This is because ngModel is a part of NativeScriptFormsModule and is not available to us out of the box using the starter template. If you are using a different way to get the number then you can choose to ignore it. We add it to our app.module.ts file as follows

 

Step 7)

As mentioned above, If we set the second parameter of  requestPermission() to true we will need to request for user’s permission, we did that at runtime in our code in step 4. But we will also need to do that in the build files as well, we do that as follows. Note that if you are setting the second parameter of  requestPermission() to false  you can skip this step.

For Android:

Open up app/App_Resources/android/AndroidManifest.xml and add the following permission to it.

For iOS:

Add the following to your info.plist file

 

Step 8)

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.

 

Useful Tips

Dialing USSD Numbers In NativeScript Apps

Dialing of USSD numbers is pretty easy. Just make sure that the USSD number that you have is a valid one and is a string.

Special Characters

Often time a number has - dashes in it. Then the way the plugin works is by removing dashes. So if a number 1-800-123 is passed then 1800123 will get dialed. This is a normal and expected behavior.

Dialing Text Characters

Often times you will see that a number is represented with Alphabets in them, such as 1-800-CODE this is done so that people can remember it easily. The alpahebets in such a number correspond to the text in the keypad. So using NativeScript if we dial 1-800-CODE then the number dialed will be 18002633.

 

Conclusion

In this tutorial, you saw how you can dial a phone number by getting the number from the user. As I already mentioned you can change the process to off getting the number as per your app. Dialing a phone number in a NativeScript app is not a complicated process. Just remember that the number accepted by the plugin is always a string. In a real world app, you should handle the permissions in a way such that if the permission to dial is denied then the user is prompted with a dialog box notifying the user with more details.

 

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

%d bloggers like this: