Getting error 'No provider for NavController' when passing data from child to parent component

Ionic Framework ionic-v3
1

I’m trying to send data from my home.ts file to the app.component.ts file using EventEmitter and Output. But everytime I reference the home page component in my app.html I get this seemingly random error. When I remove NavController from the constructor in home.ts, the error goes away.

home.ts :

 import { Component, EventEmitter, Output } from '@angular/core';
 import { NavController } from 'ionic-angular';

 @Component({
 selector: 'page-home',
 templateUrl: 'home.html',
 })

 export class HomePage {
 message : any;
 @Output() notify : EventEmitter<Object> = new EventEmitter<Object>();

constructor(public navCtrl: NavController) {

}
ionViewDidLoad(){
this.message = {"Name":"Sid", "Age":17};
this.notify.emit(this.message);
  }
}

app.html :

 <ion-nav [root]="rootPage"></ion-nav>
 <page-home (notify)="getChildData($event)"></page-home>

app.component.ts :

    import { Component, ViewChild, ViewChildren } from '@angular/core';
    import { Platform } from 'ionic-angular';
   import { StatusBar } from '@ionic-native/status-bar';
   import { SplashScreen } from '@ionic-native/splash-screen';

   import { HomePage } from '../pages/home/home';
   @Component({
    templateUrl: 'app.html'
  })
   export class MyApp {
    rootPage:any = HomePage;

   constructor(platform: Platform, statusBar: StatusBar, splashScreen: 
   SplashScreen) {
   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.
   statusBar.styleDefault();
   splashScreen.hide();

    });

 }
   getChildData(message){
   console.log(message["Name"]);
   console.log(message["Age"]);

  }
}

How do I fix this error ? I need to use the NavController so I can’t remove it. I want to still be able to send data from the child component to the parent component

2

This is the problematic line. You can’t embed pages in other pages. Take this out and simply let the rootPage assignment do its job.

3

That makes a lot of sense actually ! But how will I call the ‘notify’ event in my app.html file ? I need to send data from home.ts to the app.component.ts file

4

I would use a mutually injected service provider for this.

5

How do people normally send data from the child component to the parent component in Ionic 2 ? Because EventEmitter and Output are normally used for Angular 2, but that’s causing this NavController error here.

6

I don’t think that’s true. I think trying to embed a page in a page is causing that error, so don’t do that.