Passing data beteween 2 page with data of firebase

Ionic Framework ionic-v3
1

hello

i have my home page who get in firebase the city and i would like to after get and click and this city i get the shop in this city
who can be get the id information and passing this and the second page ?

my json file:

and
home.html

<ion-content class="card-background-page" (click)="launchSouscatPage()">
    <div *ngFor="let villeList of Ville | async">
      <ion-card>
        <img src="./img/{{villeList.images}}"/>
        <div class="cardText">
          <ion-grid>

          <div class="card-title">
            <ion-row>
            <ion-col>
              <div style="text-align: left; float:left; font-size: 1.4em; ">{{villeList.ville}}</div>
            </ion-col>
            </ion-row>
          </div>
          </ion-grid>

ville in french means city

thanks

2

Many options documented here. A shared service is probably the simplest and most common.

3

I don’t find the awnser in this doc can you Help me

Dylan ouanounou

4

were you able to find an aswer for this? I’m curious as well. I tried making a provider class with Angularfire 2 Observables but the value doesn’t update on other views.

5

nope i dont find any anwser ;(

6

have you tried putting the click event on the card or div instead of the content and passing in villeList as a parameter… then inside of the click event pass what you need to pass to the next page ?

7

yes look :

<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>
8

Do you guys know of the Input and Output that comes with Angular 2? With that you can get data out of the component and into another one. Where Input what goes inside the component and Output is what goes outside of the component. In your case you have to put the Output in that component you mentioned and Input has to be on the page2.

Inputs docs and example
https://angular.io/docs/ts/latest/api/core/index/Input-interface.html
http://learnangular2.com/inputs/

Outputs docs and example
https://angular.io/docs/ts/latest/api/core/index/Output-interface.html
http://learnangular2.com/outputs/
If you are opening the page 2 using the navigation pop method from NavController you can just pass the image string as a parameter.

http://ionicframework.com/docs/v2/api/navigation/NavController/
is somewhere in the link of the docs I mentioned.

While I am unsure if the Id you mentioned is from the Firebase DB or the ngFor but you can get the index like so:

*ngFor = "let blah of blahs; i = index"

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html