How to pass the parameter betwen component ionic 2 (data json) from the home page to the side menu


I need to pass the (members) parameter from the page Cheval.ts to page app.html forread the data


<ion-menu id="menu1" side="left" type="push" [content]="content">

      <button menuClose="menu1" ion-item *ngFor="let p of pages" >
        {{ p }}

<ion-menu id="menu2" side="right" type="push" [content]="content">

    <ion-select >
      <ion-option *ngFor="let m of cheval" value="nes">{{m.Cheval.nom}}</ion-option>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content ></ion-nav>


  selector: 'page-cheval',
  templateUrl: 'cheval.html'
export class ChevalPage {

  constructor(public navCtrl: NavController,public popoverCtrl: PopoverController, public navParams: NavParams,public data: ServiceProvider, public loadingCtrl:LoadingController  ,public menuCtrl: MenuController ) {
 getDados() {
      //retorno de Dados
                  data=> {
                      this.members = data;
                  err=> console.log(err)

Create menu with ionic 2 and angular 2

Why can’t the app component get the information from the same service provider that ChevalPage is getting it from? I also don’t understand why getDados() is returning a subscription.


To browse the list of horses in the Cheval.html pages

 <ion-row *ngFor="let member of members" (click)="View(member)" align-items-center>
        <ion-col width-30>
        <ion-col width-20>
          <strong *ngIf="member.Cheval.sexe==2">Mâle</strong>
          <strong *ngIf="member.Cheval.sexe==1">Femelle</strong>
        <ion-col width-25>
        <ion-col width-25>



Sorry, but I’m not seeing how that relates to either of my questions.


getDados() A method is used to return thed data


Well, it doesn’t (and can’t) return any data. It is returning a subscription. My fundamental suggestion is that the app component should do the same serviceProvider.getData().subscribe(cheval => this.cheval = cheval) operation that ChevalPage is doing.


in app.component.ts ??


Yes. Inject the same service provider both in the app component and ChevalPage and get the information from there.


in the constructor ??


How about you try that and see how it goes.


not works

  • Don’t post screenshots of code.
  • Case matters.


Error with import serviceProviser in Constructor


@amine216 you should write ServiceProvider instead of serviceProvider