Go to a specific page when clicking on a notification

How to go to a specific page when clicking on a notification?
I used like this, but it didn’t work


how i can do it correctly?

1 Like

you are inside an event handler… ‘this’ is local to the event handler

set another variable to the class ‘this’

var self=this

Are you sure it is still the case when fat arrow function is used? (=>). I think in this case “this” is still the component this method is in.

Now as for the issue:

  • notifications objects sent from your server have 2 parts: “notification” (contains details that are used if the app is in BACKGROUND) and “data” (contains payload the app receives if the app is in FOREGROUND).
  • so depending on state (background or foreground) you should act accordingly:
  1. If BACKGROUND - you need to define click_action in the notifications object.
  2. if FOREGROUND - you can pass required flags inside of “data”

See example of notification object below:

    "title":"Notification title",  //Any value
    "body":"Notification body",  //Any value
    "sound":"default", //If you want notification sound
    "click_action":"FCM_PLUGIN_ACTIVITY",  //Must be present for Android
    "icon":"fcm_push_icon"  //White icon Android resource
    "param1":"value1",  //Any data to be retrieved in the notification callback
    "to":"/topics/topicExample", //Topic or single device
    "priority":"high", //If not set, notification won't be delivered on completely closed iOS app
    "restricted_package_name":"" //Optional. Set for application filtering

Then basically you can do if data.param1 === true etc


inside an arrow function, this and arguments refer to the values of this and arguments in the environment the arrow function is defined in (i.e. “outside” the arrow function):

Taken from here: https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch

BTW you have typo in your code? navcntrl.push…

I use firebase console to push the notifiction
My full code: 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 { ListPage } from '../pages/list/list';
import { FCM } from '@ionic-native/fcm';

declare var cordova: any;
  templateUrl: 'app.html'
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;
  pages: Array<{title: string, component: any}>;
  constructor(public platform: Platform,private fcm: FCM, public statusBar: StatusBar, public splashScreen: SplashScreen) {



    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage }


  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.

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario

But I can’t go to the ListPage when I clicking the notification
pls help me
thanks in advance

Can you put a console.log(data); or alert() just above this.nav.push(ListPage)?

Just to check that the code gets executed when receiving a notification.

yup, alert() not working
but if the app is in the foreground the else part alert work perfectly

          alert("tappedss when killed");
        else {


      } );

Do a console.log(data) before the if/else.
Maybe you’ve used the wrong value on the data-object.

nothing as wrong
but it didn’t work
pls help :persevere::disappointed_relieved::disappointed_relieved:

What is the exact value of data.wasTapped?

Or rather: show the contents of the data variable so we can inspect.

value of data.wasTapped is ‘true

True with or without quotes? That makes a huge difference.
Please post the contents of data in a screenshot here.

I solve this issue.
You have to add the property “click_ action”: “FCM_PLUGIN_ACTIVITY” to the “notification” object in order to properly use the background method.


 "to" : "tokenHere",
 "notification" : {
     "title": "title",
     "body" : "message",
     "sound": "default",
 "data": {
 	"content": "whatever",

and use FCM API. Don’t use firebase console.


Hello @Faizyfaazz,

As you what mentioned in it, i too do that same…title message click_actions are working fine…The only problem i met is , i can’t able to set app icon…even i set color by using “color”, “#008000” …but icon fails…Kindly help me if possible

where? i dont find where to add that? in what file?

where do i have to create that object with the click_action???

Thank you so much…

Does not work. I receive following error: Object literal may only specify known properties, and ‘click_action’ does not exist in type 'ILocalNotification | ILocalNotification

This solution doesnt work for me: Object literal may only specify known properties, and ‘click_action’ does not exist in type 'ILocalNotification | ILocalNotification