How can I display firebase details in a separate page in Angularfire2 - firebase

Question

I have a static firebase database which have schema looks below.
This screenshot is a small part of it. There are many cities listed with basic info in my database.
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { CityPage} from '../city/city';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
cityPage = CityPage;
cityinfo: FirebaseListObservable<any>;
constructor(public navCtrl: NavController, af: AngularFire) {
this.cityinfo = af.database.list('/cityinfo');
}
}
I listed firebase items in a grid at home page.
home.html
<div [navPush]="cityPage" class="demo-card-square mdl-card mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-shadow--2dp" *ngFor="let item of cityinfo | async">
<figure class="mdl-card__media">
<img src="{{ item.image }}" alt="" />
</figure>
{{ item.$key }}
</div>
But my essential problem is;
I want to display city details (summary, geography, population, zipcode, image) information in a separate page ( in city page [ city.html ] ) when I clicked an image in grid at home.html
city.html
<ion-content padding class="recipe">
<p> {{ item.summary }} </p>
<p> {{ item.geography }} </p>
<p> {{ item.population }} </p>
<p> {{ item.zipcode }} </p>
<img src="{{ item.image }}">
</ion-content>
For example, if I click Charlotte city image at home page, I want to display Charlotte city's information in city.html or if I click Raleigh city's picture, I want to display information in city.html
Any help would be appreciated, if someone can help me to success it. I couldn't do that.
Thanks everyone.

Answer 1

You need to pass the city information as a parameter to you city page.
Modify the city figure html to call a function that'll do that, so when you click/tap that image it'll pass the current item of your foreach to the function that'll do the work, like this:
<div [navPush]="cityPage" class="demo-card-square mdl-card mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-shadow--2dp" *ngFor="let item of cityinfo | async">
<figure class="mdl-card__media" (click)="showCityInfo(item)"> //CAN USE (tap) TOO.
<img src="{{ item.image }}" alt="" />
</figure>
{{ item.$key }}
</div>
In your Home.ts create that function and, using navController, push the city page with the city info.
showCityInfo(item) {
this.navCtrl.push(CityPage, item);
}
in your citypage, grab the city info with navparams and save it in a variable
//IMPORT NAVPARAMS FROM IONIC-ANGULAR
cityInfo: any;
constructor(public navPrms: NavParams){
this.cityInfo = navPrms.data; //here you'll get the data you passed from your home.ts
}
just populate your city.html with your city info
<ion-content padding class="recipe">
<p> {{ cityInfo.summary }} </p>
<p> {{ cityInfo.geography }} </p>
<p> {{ cityInfo.population }} </p>
<p> {{ cityInfo.zipcode }} </p>
<img src="{{ cityInfo.image }}">
</ion-content>
Hope it helps :D