
SMS and Phone Calls with NativeScript Angular
Adding SMS support for your NativeScript application is simple! This article will show you how to send an SMS with Angular NativeScript.
Project Setup
To get started, create a blank Angular NativeScript project (or navigate to yours) by typing:
# New Project
tns create NativeScriptSMS --template nativescript-template-ng-tutorial
# Navigate to Project
cd NativeScriptSMS
This will create a new project named NativeScriptSMS
. Ensure you’re inside that directory and install the nativescript-phone
plugin:
tns plugin add nativescript-phone
User Interface
Firstly, let's import the NativeScriptFormsModule
so we can use ngModel
to gather an input from the user.
import {NativeScriptFormsModule} from "nativescript-angular/forms"
@NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [NativeScriptModule, NativeScriptFormsModule],
schemas: [NO_ERRORS_SCHEMA],
})
The UI can then be constructed. To keep things super simple, we’ll just be editing the template in our app.component.ts.
@Component({
selector: "my-app",
template: `
<ActionBar class="action-bar" title="NativeScript SMS Application"></ActionBar>
<StackLayout class="p-20">
<Label text="Select either TEXT or PHONE to continue."></Label>
<FlexboxLayout>
<Button class="phone-button" (tap)="setPhoneType(0)" text="PHONE"></Button>
<Button class="text-button"(tap)="setPhoneType(1)" text="Text"></Button>
</FlexboxLayout>
<StackLayout *ngIf="phoneType === 0">
<TextField keyboardType="phone" hint="Enter Phone Number..." [(ngModel)]="phoneNumber"></TextField>
<Button (tap)="callNumber()" *ngIf="phoneNumber" class="phone-button" [text]="'Call ' + phoneNumber"></Button>
</StackLayout>
<StackLayout *ngIf="phoneType === 1">
<TextField keyboardType="phone" hint="Enter Phone Number..." [(ngModel)]="phoneNumber"></TextField>
<TextField keyboardType="text" hint="Enter Message..." [(ngModel)]="message"></TextField>
<Button (tap)="textNumber()" *ngIf="phoneNumber && message" class="text-button" [text]="'Text ' + phoneNumber"></Button>
</StackLayout>
</StackLayout>
`
})
Dialing a Number
We will then have to import the nativescript-phone
module inside our app.component.ts
:
import * as phone from 'nativescript-phone';
We can use the phone.dial()
function to call a specific number. We capture that number via the ngModel
binding in our template view.
Simple enough. I’ve ensured to typecast the number to a string so that it can fit the appropriate parameter type. We initially capture it as a number so that it’s easier for the user to use the numeric keypad on their phone.
export class AppComponent {
//Variables
phoneNumber: number;
message: string;
//Used to determine which choice user has selected
phoneType: number;
//Set user choice (text or phone)
setPhoneType(val) {
this.phoneType = val;
}
callNumber() {
phone.dial(String(this.phoneNumber), true)
}
}
Texting a Number
An interesting thing about the SMS function is that we have access to an array of numbers, so we could have multiple inputs (or navigate a user to a contacts screen). I’ve elected to just add one number gathered from the model:
textNumber() {
/*
As we have an array of phone numbers, we could add a second one here
phone.sms(['1234','5678'...], message)
*/
phone.sms([String(this.phoneNumber)], this.message).then((result) => {
//Returns a promise, do what you want here
console.log(result);
})
}
Here's our application:
developer.school Newsletter
Join the newsletter to receive the latest updates in your inbox.