Not able to set Ionic Local Notification On Click Event (weird syntax error)

Question

I am using Ionic Local Notifications in my app. So far I am able to trigger a notification at a given time. I also want to do set a custom action to on click event of notification. But when I am not able to do so because of syntax error. I looked at many example codes like this one. This is the general code that everyone is using to set an action for click event.

 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();
    })
  });
}

But for some unknown reason, this code shows syntax error for me

It says

[ts] Expected 1 arguments, but got 2.
(property) HomePage.localNotifications: LocalNotifications

Here is my full home.ts code: Note- I am calling the submit function from home.html. Notifications are working perfectly and triggered on time. I just need to implement custom on click action.

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

/**
 * Generated class for the HomePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  data = { title: '', description: '', date: '', time: '' };
  constructor(public navCtrl: NavController, private localNotifications: LocalNotifications, public navParams: NavParams, public platform: Platform,
    public alertCtrl: AlertController) {


    this.platform.ready().then((readySource) => {
      this.localNotifications.on('click', (notification, state) => {
        let alert = this.alertCtrl.create({
          title: 'Notification Clicked'
        });
        alert.present();
      });
    });




  }


  submit() {
    console.log(this.data);
    var date = new Date(this.data.date + " " + this.data.time);
    var title = this.data.title;
    var text = this.data.description;
    console.log(date);
    this.localNotifications.schedule({
      title: title,
      text: text,
      trigger: {at: date},
      led: 'FF0000',
      sound: this.setSound(),
      actions: [
        { id: 'yes', title: 'Yes' },
        { id: 'no', title: 'No' }
      ]
    });

}

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

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
  }

}

score 2 · Answer 1 · answered Dec 24 '18 at 16:54

2

The correct function is:

this.localNotifications.on('click').subscribe(notification => {
       // Insert your logic here
        });

I find this answer in ionic forums: here

answered Dec 24 '18 at 16:54

Omer Kamil

81
2
8

Anjil Dhamala · Answer 2 · 2018-07-23T16:47:59.340

1

The on() function returns an observable. There is no place for a callback. So you'll just be doing

this.localNotifications.on('click').subscribe((notification, state) => {
    let alert = this.alertCtrl.create({
          title: 'Notification Clicked'
        });
        alert.present();
});

the plugin may not resolve with both notification and state params, use a single param, say resolve: any, to log and see what the plugin returns on click event.

edited Jul 23 '18 at 16:47

answered Jul 23 '18 at 13:12

Anjil Dhamala

1,544
3
18
37

It also shows syntax error: [ts] Argument of type '(notification: any, state: any) => void' is not assignable to parameter of type '(value: any) => void'. (parameter) state: any – Nabil Mohammed Nalakath Jul 23 '18 at 14:00
That prolly means the returning observable doesn't have two parameters that we expected (notification and state). This is one thing that I hate about ionic-native's documentation. They don't tell you what kind of response the observable resolves with. Just set is as (response: any) and log the response to see what you get back. .subscribe((response: any) => { console.log(response)}). – Anjil Dhamala Jul 23 '18 at 14:49
I tried like you said - this.localNotifications.on('event').subscribe((response: any) => { console.log('response:'); console.log(response); }); But my console doesnt show anything. – Nabil Mohammed Nalakath Jul 23 '18 at 15:03
I'm sorry. I think I confused you with 'event'. What I meant was 'event' as in any kind of DOM/device event. Like 'click' for example. I've edited my answer. – Anjil Dhamala Jul 23 '18 at 16:46

score 0 · Answer 3 · answered Jul 23 '18 at 13:12

0

  this.localNotifications.on('click', (notification, state) => {

in this line the on method only expect one argument but you pass two

answered Jul 23 '18 at 13:12

PRATHYUSH P

175
1
5

1

I understand that brother, I can also read the error log. My question is how to fix it and add on click action – Nabil Mohammed Nalakath Jul 23 '18 at 14:01

Not able to set Ionic Local Notification On Click Event (weird syntax error)

3 Answers3