Call nav root's function from ion-menu

Hello Guys,

I’m just starting with ionic and angular, so this might be pretty stupid…

I’m trying to call a function in my nav’s root page (custom MapPage component), from ion-menu, but I’m not sure how to do it.

Currently I’m trying to call it with this.rootPage.myFunction(param) from app.ts, but that throws an TypeError: this.rootPage.myFunction is not a function exception.

This is my code:

app.ts

import {Component, ViewChild} from '@angular/core';
import {Platform, ionicBootstrap, MenuController, Nav} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {MapPage} from './pages/map/map';


@Component({
  templateUrl: 'build/app.html'
})

export class MyApp {

  rootPage: any = MapPage;
  mapOverlays: Array<{id: any, title: string}>;

  constructor(public platform: Platform, public menu: MenuController ) {

    this.initializeApp();

    this.mapOverlays = [
      { id: 1, title: 'overlay 1'},
      { id: 2, title: 'overlay 2'},
      { id: 3, title: 'overlay 3'}
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }

  enableOverlay(overlay) {
    //Problem line:
    this.rootPage.myFunction(overlay);
  }
}

ionicBootstrap(MyApp);

app.html

<ion-menu [content]="content" persistent="true">
  <ion-toolbar>
    <ion-title>Page Title</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let m of mapOverlays" (click)="enableOverlay(m)">
        {{m.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

map.ts:

import {Component} from '@angular/core';
import {Platform, MenuController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/map/map.html',
})
export class MapPage {

  constructor( public platform: Platform, public menu: MenuController) {

  	this.platform.ready().then(() => {
 		//set up map
    });

  }

  myFunction(overlay) {
  	//do something
  }
}

Based on this discussion I thought ViewChild could help me, since the MapPage component is a child, but it’s parent is the nav; so I’m lost as to how to apply that here.

Any guidance would be greatly appreciated.

first your app looks like the old beta release, maybe if you learn things its better to use the current Version wich is at the moment rc0.

And take a look at the example ionic-conference-app

and for your problem, you might initialize the Page Component first

mapPage: MapPage;

and call this.mapPage.myFunction(overlay)

rootPage could be changed during runtime so its not the best idea to call functions from this one

viewchild is needet when you call the root nav component on the app component because otherwise ist not accessible.

1 Like

Thanks a lot for your comment, Philipp.

I’ve set up ionic 2.0.0-rc.0 now, and tried initializing the Page Component, but how would it know what the right “instance” of MapPage is? (I’m probably still missing some important concepts in angular). I’m still getting an exception:

error_handler.js:45 EXCEPTION: Error in ./MyApp class MyApp - inline template:9:57 caused by: Cannot read property 'myFunction' of undefined

app.component.ts:

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { MapPage } from '../pages/map/map';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = MapPage;

  mapPage: MapPage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform) {
    this.initializeApp();

  }

  initializeApp() {
    this.platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }

  openPage(page) {
    //Exception:
    this.mapPage.myFunction('hello');
  }
}