app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LocalNotifications } from '@ionic-native/local-notifications';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
LocalNotifications,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="notify()">Test</button>
</ion-content>
home.ts
import { Component } from '@angular/core';
import { NavController, Platform, AlertController } from 'ionic-angular';
import { LocalNotifications } from '@ionic-native/local-notifications';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, private localNotifications: LocalNotifications, private plt: Platform, public alertCtrl: AlertController) {
this.plt.ready().then((readySource) => {
this.localNotifications.on('click', (notification, state) => {
let json = JSON.parse(notification.data);
let alert = alertCtrl.create({
title: notification.title,
subTitle: json.mydata
});
alert.present();
});
});
}
notify() {
console.log('test');
this.localNotifications.schedule({
id: 1,
title: 'Attention',
text: 'Simons Notification',
data: { mydata: 'My hidden message this is' },
at: new Date(new Date().getTime() + 5 * 1000)
});
}
}