Ionic 3, Angular 5 and Cordova Local Notification Example

A comprehensive step by step tutorial on how to create Local Notification using Ionic 3, Angular 5 and Cordova with Native Local Notification Plugin. The story for this tutorial is just creating multiple notifications that input by the user inside the app. So, inside the app just a form for input the notification description and time. The rest of the notification function will be handled by the system. This tutorial is compatible with the other tutorial about Calendar UI.

Jumps to the steps:

• Create a New Ionic 3, Angular 5 App
• Install and Configure Ionic 3 Cordova Native Local Notification Plugin
• Create Form for Input Local Notification
• Run and Test Ionic 3, Angular 5 and Cordova Local Notification App

What is the local notification?

The local notification is the way to let the user know it has information for them and it's running in the background of the local device which does not require a server like push notification.

The following tools, frameworks, and modules are required for this tutorial:

1. Node.js (recommended stable version)
2. Ionic 3 (latest version)
3. Angular 5
4. Cordova
5. Ionic 3 Cordova Native Local Notification Plugin
6. IDE or Text Editor
7. Terminal or Node Command Line

We assume that you already installed Node.js and can run `npm` on the terminal (Mac OS/Linux) or Node.js command line (Windows). Now, update or install Ionic 3 and Cordova with the latest version. Open a terminal then goes to your Ionic 3 projects folder then type this command.

sudo npm i -D -E ionic@latest
sudo npm i g cordova

Create a New Ionic 3, Angular 5 App

On the terminal or Node.js command line type this command to create a new Ionic 3, Angular 5 and Cordova App.

ionic start ionic-local-notif blank

You can skip Cordova integration right now, it will be added manually next time. Next, go to the newly created folder:

cd ./ionic-local-notif

For tutorial sanitation, run the app on the browser then type this command.

ionic serve -l

That command will open the default browser and display this page.

Install and Configure Ionic 3 Cordova Native Local Notification Plugin

To install Ionic 3 Cordova Native Local Notification Plugin, type this command in the terminal or command line after you stop the running Ionic 3 app by press CTRl+C keys.

ionic cordova plugin add cordova-plugin-local-notification
npm install --save @ionic-native/local-notifications

That commands will also install or adds Cordova Android and iOS platforms. Next, we will add this plugin manually to `src/app/app.module.ts`. Open and edit `src/app/app.module.ts` the file then add this line of LocalNotification module to the import section.

import { LocalNotifications } from '@ionic-native/local-notifications';

Add `LocalNotifications` to `@NgModule` providers, so it will look like this.

providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler},
  LocalNotifications
]

Now, the plugin is ready to use with Ionic 3, Angular 5 and Cordova app.

Create Form for Input Local Notification

To create local notification scheduler, we need to create a form first. Open and edit `src/pages/home/home.html` then replace all HTML tags with this.

<ion-header>
  <ion-navbar>
    <ion-title>
      Local Notification
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form (ngSubmit)="submit()">
    <ion-list>
      <ion-item>
        <ion-label floating>Title</ion-label>
        <ion-input type="text" [(ngModel)]="data.title" name="title"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Description</ion-label>
        <ion-input type="text" [(ngModel)]="data.description" name="description"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Date</ion-label>
        <ion-datetime displayFormat="DD/MM/YY" pickerFormat="D MMMM YYYY" [(ngModel)]="data.date" name="date"></ion-datetime>
      </ion-item>
      <ion-item>
        <ion-label floating>Time</ion-label>
        <ion-datetime displayFormat="HH:mm" pickerFormat="HH mm" [(ngModel)]="data.time" name="time"></ion-datetime>
      </ion-item>
    </ion-list>
    <div padding>
      <button ion-button full round>Add Notification</button>
    </div>
  </form>
</ion-content>

Next, open and edit `src/pages/home/home.ts` then add or replace these imports Angular Component, Ionic Angular NavController, Platform, AlertController, and LocalNotification plugin.

import { Component } from '@angular/core';
import { NavController, Platform, AlertController } from 'ionic-angular';
import { LocalNotifications } from '@ionic-native/local-notifications';

Create an object variable as the Angular model before the constructor.

data = { title:'', description:'', date:'', time:'' };

Inject required modules to the constructor.

constructor(public navCtrl: NavController,
  public localNotifications: LocalNotifications,
  public platform: Platform,
  public alertCtrl: AlertController) {}

Next, create a function/method after the constructor for setting a Local Notification scheduler.

submit() {
  console.log(this.data);
  var date = new Date(this.data.date+" "+this.data.time);
  console.log(date);
  this.localNotifications.schedule({
     text: 'Delayed ILocalNotification',
     at: date,
     led: 'FF0000',
     sound: this.setSound(),
  });
  let alert = this.alertCtrl.create({
    title: 'Congratulation!',
    subTitle: 'Notification setup successfully at '+date,
    buttons: ['OK']
  });
  alert.present();
  this.data = { title:'', description:'', date:'', time:'' };
}

Finally, create a function for setting the sound file for the specific platform.

setSound() {
  if (this.platform.is('android')) {
    return 'file://assets/sounds/Rooster.mp3'
  } else {
    return 'file://assets/sounds/Rooster.caf'
  }
}

Run and Test Ionic 3, Angular 5 and Cordova Local Notification App

We will run this app on the real device. For Android, first, remove the default created platform and change Cordova-Android version to the earlier version.

ionic cordova platform rm android
ionic cordova platform add [email protected]

We use Cordova-Android 6.3.0 because there's a lot workaround for the latest version (7.0.0). Next, run the app to the Android device by type this command.

ionic cordova run android

You will see this page on the Android device.

And here the notification looks like while the device in sleep mode.

That it's, we still have the problem using iOS for this tutorial, so we skip that for now. For full source code, you can find on our GitHub.

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ion2FullApp ELITE - The Complete Ionic 3 Starter App and save development and design time.

That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can find the following books:

• Pro Typescript, Application-Scale Javascript Development
• Learn Ionic 2, Develop Multi-platform Mobile Apps (Still compatible with Ionic 3)
• Angular 4 Projects, Learn to Build Single Page Web Applications Using 70+ Projects

Or take the following course:

• Learn Ionic 3 From Scratch
• Master Ionic 3 with Ionic Native and Cordova Integrations
• Ionic 3: Build A Complete Mobile Weather App From Scratch

Thanks!