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:
NativeScript SMS