Display Local Notifications In A NativeScript Application With Angular

A while back I wrote a tutorial that demonstrated how to use local notifications in a NativeScript Core project, also referred to as a vanilla NativeScript project. Since writing that tutorial I had received several requests to demonstrate the same in a NativeScript with Angular project.

If you’re unfamiliar, local notifications are scheduled notifications rather than notifications sent from a server. These notifications are useful when you need to trigger reminders in your application or based on events. For example, maybe you develop an iBeacon application and as you approach an iBeacon you want to receive a notification. This type of notification would be a local notification.

We’re going to see how to schedule and display notifications in Android and iOS using NativeScript and Angular.

To keep things simple, we’re going to build the same application as seen in the previous example, but this time with a more polished user interface and Angular.

NativeScript Local Notifications with Angular

In the above animated image, we provide information to be shown in a notification. Ten seconds later, the notification is presented to the user. If the application is closed, the notification appears in the notification tray, but if the application is in the foreground, the notification displays as a dialog alert.

So how do we do this?

Create a NativeScript with Angular Project

For simplicity, let’s create a fresh NativeScript with Angular project. Assuming the NativeScript CLI is installed and configured, execute the following command:

The --ng flag in the above command indicates we are creating an Angular project, not a NativeScript Core project.

This project will be using the NativeScript Local Notification plugin created by Eddy Verbruggen. From the command line, execute the following command:

With the project created and the plugin installed for Android and iOS, we can start developing the application with TypeScript and XML.

Scheduling and Responding to Local Notifications

The concept behind what we are trying to accomplish is simple. Schedule a notification for a certain time, and respond when the message is received.

Open the project’s app/app.component.ts file and include the following TypeScript code:

There are a few important things happening in the above code.

In the constructor method we are initializing an object which will hold user input. This object will be used to populate the notification with information.

After the component initializes, we establish a callback for when a local notification message is received. When the application is in the foreground, this callback will trigger and display a notification.

To schedule local notifications, we’d have something like this:

On iOS we have to ask for permission to display notifications. On Android this will always be true, but if true on iOS, we try to schedule the notification based on the user input.

In this example the schedule is ten seconds from the current timestamp. Once scheduled, we show a Toast notification. More information on Toast notifications can be seen in a previous article I wrote titled, Display Toast Notifications in a NativeScript Angular Application.

The corresponding NativeScript XML is very simple. Open the project’s app/app.component.html file and include the following markup:

Essentially we only have a form with a button that calls our schedule function from the TypeScript code.


You just saw how to schedule and display local notifications in an Android and iOS application built with NativeScript and Angular. This is a followup to a previous article I wrote on the topic for NativeScript Core titled, Using Local Notifications in Your NativeScript Mobile App.

Local notifications are very different than push notifications in the sense that your application is scheduling them rather than some remote server.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • pavi chandran

    Date(new Date().getTime() + (10 * 1000))
    how to calculated time?

    • The parameter requires a standard date. I wanted to schedule a notification 10 seconds into the future so I got the current date and time as a unix time which is milliseconds from epoch. I added 10,000ms, then converted it back into a date.

      Make sense?

      There are other ways to do manipulations on dates if you don’t like this one.