ionic framework - Communication between app.component.ts and another component angular 2 -

i beginner in angular 2 since want move app angular 1 more efficient. , don't understand how make communication between 2 components available. case think special because want send data app.component.ts home.ts. these 2 classes not in same directory.

here architecture of app :

>src     > app      - app.component.ts  //where data generated  - 2 lateral menus      - app.html  //html associated app.component.ts       - app.module.ts      - app.scss    > pages      > home        - home.html  //home page        - home.ts        - home.scss

first in file app.html have button :

<ion-menu [content]="content" side="left" id="menuparameter">      <ion-header>          <ion-toolbar color="default">              <ion-title>menu1</ion-title>          </ion-toolbar>      </ion-header>            <ion-content>               <ion-list>                          <ion-item>                  <ion-label>on/off</ion-label>                  <!-- click here switch on/off -->                  <ion-toggle color="danger" checked="false" [(ngmodel)]="istoggled" (ionchange)="notify()"></ion-toggle>              </ion-item>          </ion-list>                    </ion-content>  </ion-menu>    <ion-menu [content]="content" side="right" id="menuinformation">      <ion-header>          <ion-toolbar color="default">              <ion-title>menu2</ion-title>          </ion-toolbar>      </ion-header>      <ion-content>      </ion-content>  </ion-menu>    <ion-nav [root]="rootpage" #content swipebackenabled="false"></ion-nav>

when clicking on button catch value in app.component.ts :

import { component } '@angular/core';  import { platform } 'ionic-angular';  import { statusbar } '@ionic-native/status-bar';  import { splashscreen } '@ionic-native/splash-screen';  import { homepage } '../pages/home/home';        @component({    templateurl: 'app.html'  })  export class appcomponent {    rootpage:any = homepage;      constructor(platform: platform, statusbar: statusbar, splashscreen: splashscreen) {      platform.ready().then(() => {        statusbar.styledefault();        splashscreen.hide();        this.istoggled = false;              });    }      public istoggled: boolean;        public notify() {      //i want send value home.ts component !      console.log("toggled: "+ this.istoggled);     }      }

finally, if possible value in component called home.ts :

import { component } '@angular/core';  import { logger } '../../app/logger.service'      import { httpclient } '@angular/common/http';  import { navcontroller, navparams, menucontroller } 'ionic-angular';  import {translateservice} '@ngx-translate/core';        @component({    selector: 'page-home',    templateurl: 'home.html'  })    /**   * contain link    */  export class homepage {      private logger:logger = new logger(this.constructor.name);          constructor(public translate: translateservice, public navctrl: navcontroller,      public navparams: navparams,       public menu: menucontroller, private httpclient:httpclient) {      this.logger.log("instantiating homepage()");      menu.enable(true);                  translate.setdefaultlang('en');      translate.use('en');    }          openmenu(evt) {      if(evt === "main"){         this.menu.enable(true, 'menuparameter');         this.menu.enable(false, 'menuinformation');      }else{         this.menu.enable(true, 'menuinformation');         this.menu.enable(false, 'menuparameter');      }      this.menu.toggle();  }    //method value catched in app.component.ts button value (true or false)!      }

thanks in advance

jp

use ionic events api this, it's pretty simple use, app component publish topic , home component subscribe topic retrieve data want pass around.

more details here.