Passing data between page


#1

hi
i need you help
i show you all of my project and after i explain you

my first page

home.html

<ion-header>
<ion-toolbar color="primary">

  	<button ion-button menuToggle >
  <ion-icon name="menu"></ion-icon>
</button>
<ion-title align="center">Home</ion-title>

<ion-buttons end>
 <button ion-button icon-only (click)="launchSearchBar()">
 <ion-icon ios="ios-search" md="md-search"></ion-icon>
</button>
  <button ion-button icon-only color="royal">
    <ion-icon ios="ios-funnel" md="md-funnel"></ion-icon>
  </button>
</ion-buttons>
</ion-toolbar>

</ion-header>
<ion-content class="card-background-page" (click)="presentLoading()" (click)="launchCatpagePage()" >
  <ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content
  pullingIcon="arrow-dropdown"
  pullingText="Pull to refresh"
  refreshingSpinner="circles"
  refreshingText="Refreshing...">
</ion-refresher-content>
  </ion-refresher>
<div *ngFor="let villeList of Ville | async">
  <ion-card>
    <img src="./img/Ville/{{villeList.images}}"/>
          <div class="card-title">{{villeList.ville}}</div>
  </ion-card>
</div>
  </ion-content>

home.ts :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SouscatPage } from '../souscat/souscat';
import { PostbuisnessPage } from '../postbuisness/postbuisness';
import { CatpagePage } from '../catpage/catpage';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import { LoadingController } from 'ionic-angular';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  Ville: FirebaseListObservable<any>;
  constructor(public navCtrl: NavController,angFire: AngularFire,public loadingCtrl: LoadingController)
  {
this.Ville   = angFire.database.list('/Ville');
  }
launchCatpagePage(){
  this.navCtrl.push(CatpagePage,);
}
presentLoading() {
    this.loadingCtrl.create({
      content: 'Veuillez patientez...',
      duration: 10,
      dismissOnPageChange: false
    }).present();
}
doRefresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
  }

}

my app content :

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SouscatPage } from '../pages/souscat/souscat';
import { PostbuisnessPage } from '../pages/postbuisness/postbuisness';
import { CatpagePage } from '../pages/catpage/catpage';
import { DynamicComponentModule } from 'ng-dynamic';
import { AngularFireModule } from 'angularfire2';
import { NavController } from 'ionic-angular';
import { EmailComposer } from 'ionic-native';
import { ListeCPage } from '../pages/liste-c/liste-c';

export const firebaseConfig = {
  // Initialize Firebase
    apiKey: "***********************************************",
    authDomain: "**********************************************",
    databaseURL: "******************************************",
    storageBucket: "***************************************",
    messagingSenderId: "********************"
}
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SouscatPage,
    PostbuisnessPage,
    CatpagePage,
    ListeCPage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    DynamicComponentModule,
    AngularFireModule.initializeApp(firebaseConfig)

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SouscatPage,
    PostbuisnessPage,
    CatpagePage,
    ListeCPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {
}

and this is my second page .html

<ion-header>
  <ion-navbar color="primary">
    <ion-title align="center">
      Categorie
    </ion-title>
    <ion-buttons end>
    <button ion-button icon-only (click)="launchHomePage()">
      <ion-icon name="home"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page" (click)="presentLoading()" (click)="launchSouscatPage()">
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
  <div *ngFor="let cat of Cat | async ">
  <ion-card>
    <img src="./img/Categorie/{{cat.image}}"/>
        <div class="card-title">{{cat.nomCat}}</div>
  </ion-card>
</div>
</ion-content>

secondPage.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import { SouscatPage } from '../souscat/souscat';
import { HomePage } from '../home/home';
import { LoadingController } from 'ionic-angular';
/*
  Generated class for the Catpage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-catpage',
  templateUrl: 'catpage.html'
})
export class CatpagePage {
  Cat: FirebaseListObservable<any>;

  constructor(public navCtrl: NavController,angFire: AngularFire,public loadingCtrl: LoadingController)
  {
this.Cat   = angFire.database.list('/Cat');
  }
  launchSouscatPage(){
    this.navCtrl.push(SouscatPage);
  }
  launchHomePage(){
    this.navCtrl.push(HomePage);
  }
  presentLoading() {
      this.loadingCtrl.create({
        content: 'Veuillez patientez...',
        duration: 14,
        dismissOnPageChange: false
      }).present();
  }
  doRefresh(refresher) {
      console.log('Begin async operation', refresher);

      setTimeout(() => {
        console.log('Async operation has ended');
        refresher.complete();
      }, 2000);
    }
}

i want passing data between 2 page
the home contain the city and after i push the city different category come after you click on category , the list of company come filter by city but i dont now how can be push data filtered in my page of list company

for a better comprehension this is a screen of my app and different page

City

Category

subcategory

detail list filtered by city -category - subcategory

thank for you help
ps: sorry for my english im french


#2

#3

i don’t now how can be used this in my project where i copy that ?

can you show me in the exmple