How to display the popover content in another page?

Question

I am clicking the choose city on clicking that it will popover two cities one is 'bengaluru' and another one is 'hyderabad' if click that bengaluru it has to display that name instead of choose city..

home.html:

<ion-header>

<button ion-button icon-only (click)="presentPopover($event)" >
    Choose City
    <ion-label>{{cityname}}</ion-label>
  <ion-icon name="arrow-dropdown"></ion-icon>
</button>

</ion-header>

home.ts:

import { PopoverController } from 'ionic-angular';


import { Component } from '@angular/core';
import {Popoverpage} from '../popoverpage/popoverpage';


@Component({
  selector: 'page-home',
   templateUrl: 'home.html'
})
export class HomePage {
  constructor(public popoverCtrl: PopoverController,
    ) {}

  presentPopover(myEvent) {
    let popover = this.popoverCtrl.create(Popoverpage);
    popover.present({
      ev: myEvent
    });
  }
}

popoverpage.ts:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ViewController } from 'ionic-angular';
import { Rest } from '../../providers/network/rest';
import { Logger } from '../../providers/logger/logger';

/*
  Generated class for the Popoverpage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  template: `
    <ion-list>
      <button ion-item (click)="store()">Bengaluru</button>
      <button ion-item (click)="fun()">Hyderabad</button>
    </ion-list>
  `
})

export class Popoverpage{
    store_id
  cityname


   constructor(public viewCtrl: ViewController,
     public params:NavParams,
    public navCtrl: NavController,
    public rest: Rest,
    public logger: Logger) {
   }

  store() {
    let  storeObj={
      store_id: '1'
    }

    this.logger.debug("checking the  " +JSON.stringify(storeObj));

    this.rest.post('/store',storeObj)
      .subscribe(result => {
        this.logger.debug("checking the data "+JSON.stringify(result));
        if(result.status == '1'){
          this.logger.info("success callback");
          // this.navCtrl.push("Homepage");
          this.params.get('cityname');

          //this.navCtrl.pop();
          this.viewCtrl.dismiss();

        }
        else{
          this.logger.info("error callback");
this.viewCtrl.dismiss();
        }
      })

  }

  fun() {
    let  storeObj={
      store_id: '0'
    }

    this.logger.debug("checking the  " +JSON.stringify(storeObj));

    this.rest.post('/store',storeObj)
      .subscribe(result => {
        this.logger.debug("checking the data "+JSON.stringify(result));
        if(result.status == '1'){
          this.logger.debug("success callback");
          this.params.get('cityname');
          //this.navCtrl.pop();
           this.viewCtrl.dismiss();
        }
        else{
          this.logger.debug("error callback");
           this.viewCtrl.dismiss();
        }
      })

  }

}

how can i display that thing

Answer 1

You can use the dismiss to pass data back and set a callback in onDidDismiss. In the popoverpage.ts:

let data= cityname;//the variable containing the data to return
this.viewCtrl.dismiss({'city':data});

In your home.ts

  let popover = this.popoverCtrl.create(Popoverpage);

  popover.onDidDismiss(data=>{
     this.selectedCity=data.city;
  });

 popover.present({
      ev: myEvent
    });