LOCAL NOTIFICATION IN IONIC 3 & ANGULAR 5

Share the post

Hello All, In this Ionic tutorial, We will discuss Local notification in Ionic 3 & angular 5. If you want to display local notifications using capacitors then you can visit here.

Local Notification In 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 commands 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 the below code in local-notification.html

<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 the 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';

@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 the title for notification
text: It represents message for notification
sound: We can add a custom sound file in the assets folder & give a path here
data: Object data for JSON…The default value is null

Leave a Comment