Communication between app.component.ts and another component angular 2

Question

I am a beginner in Angular 2 since I want to move my app from angular 1 to something more efficient. And I don't understand how to make a communication between two components available. My case is I think special because I want to send some data from my app.component.ts to home.ts. These two classes are not in the same directory.

Here is the architecture of my app :

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

First in the file app.html I have a 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 to 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 this button I catch the value in the app.component.ts :

import { Component } 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 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 to send this value to home.ts component !
    console.log("Toggled: "+ this.isToggled); 
  }


}

Finally, I would like if possible to get this value in the component called home.ts :

import { Component } from '@angular/core';
import { Logger } from '../../app/logger.service'


import { HttpClient } from '@angular/common/http';
import { NavController, NavParams, MenuController } from 'ionic-angular';
import {TranslateService} from '@ngx-translate/core';



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

/**
 * Contain link with 
 */
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 to get the value catched in app.component.ts that is to say the button value (true or False)!


}

Thanks in advance

JP

Answer 1

Use the ionic events api for this, it's pretty simple to use, your app component will publish to a topic and the home component will subscribe to that topic to retrieve that data you want to pass around.

More details here.