Table of Contents
Local Notification Using Ionic 3 & Angular 5
Today, We will see How to implement Local Notification Using ionic & Angular 5? In this topic, We will cover all the necessary steps required to implement local Notification in the android application.
1.Genereate a new page by using the command :
ionic g page local-notification
you can see here what are the different types of the command used to Generate ionic pages, components & pipes.
2.Import the module in app.module.ts :
import { LocalNotificationPage } from '../pages/local-notification/local-notification';
@NgModule({
declarations: [
LocalNotificationPage
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
LocalNotificationPage
],
providers: [
StatusBar,
SplashScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
RestProvider,
CommonProvider,
QRScanner
]
})
export class AppModule { }
3.Update app.component.ts :
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { HomePage } from ‘../pages/home/home’;
import { LoginPage } from “../pages/login/login”;
import { TabsPage } from “../pages/tabs/tabs”;
import { QrscannerPage } from ‘../pages/qrscanner/qrscanner’;
import { LocalNotificationPage } from ‘../pages/local-notification/local-notification’;
@Component({
templateUrl: ‘app.html’
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = LoginPage;
pages: Array<{ title: string, component: any }>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: ‘Home’, component: HomePage },
{ title: ‘Tabs’, component: TabsPage },
{
title: ‘QR Scanner’, component: QrscannerPage
},
{ title: ‘Local Notification’, component: LocalNotificationPage },
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn’t want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
4.Install plugin & dependency :
ionic cordova plugin add cordova-plugin-local-notification
npm install –save @ionic-native/local-notifications@4
5.Write dependency in app.module.ts :
import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { MyApp } from ‘./app.component’;
import { HomePage } from ‘../pages/home/home’;
import { TabsPage } from ‘../pages/tabs/tabs’;
import { QrscannerPage } from ‘../pages/qrscanner/qrscanner’;
import { LocalNotificationPage } from ‘../pages/local-notification/local-notification’;
import { ModalPage } from ‘../pages/modal/modal’;
import { LoginPage } from ‘../pages/login/login’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { LocalNotifications } from ‘@ionic-native/local-notifications’;
import { RestProvider } from ‘../providers/rest/rest’;
import { HttpClientModule } from “@angular/common/http”;
import { CommonProvider } from ‘../providers/common/common’;
import { QRScanner, QRScannerStatus } from ‘@ionic-native/qr-scanner’;
@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
TabsPage,
ModalPage,
QrscannerPage,
LocalNotificationPage
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
TabsPage,
ModalPage,
QrscannerPage,
LocalNotificationPage
],
providers: [
StatusBar,
SplashScreen,
LocalNotifications,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
RestProvider,
CommonProvider,
QRScanner
]
})
export class AppModule { }
6.Write below code in local-notification.html
<!--
Generated template for the LocalNotificationPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
–>
<ion-header>
<ion-navbar>
<ion-title>Local Notification Example</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div padding>
<button ion-button color=”primary” block (click)=”showNotification()”>Show Notification</button>
</div>
</ion-content>
7.write below code in local-notification.ts
import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { LocalNotifications } from ‘@ionic-native/local-notifications’;
/**
* Generated class for the LocalNotificationPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: ‘page-local-notification’,
templateUrl: ‘local-notification.html’,
})
export class LocalNotificationPage {
constructor(public navCtrl: NavController, public navParams: NavParams, private localNotifications: LocalNotifications) {
}
ionViewDidLoad() {
console.log(‘ionViewDidLoad LocalNotificationPage’);
}
showNotification() {
this.localNotifications.schedule({
id: 1,
title: ‘This is the Title of Local notification’,
text: ‘This is local notification example’,
sound: ”,
data: {}
});
}
}
in this example,
id : It represents the unique id for notification
title : It represents title for notification
text : It represents message for notification
sound : We can add custom sound file in assets folder & give path here
data : Object data for JSON…Default value is null