Ionic 4 - Pass Data BACK from Popover without dismissing

Question

In Ionic 4, I would like to pass data from Popover controller to the view page.

I am able to get the data onDismiss() but I would like to do it without exiting the popover.

Below is the code snippet I tried onDismiss() and it worked.

Do we any other popover methods or state changes that can be captured

Page

async presentPopover(opts) {

    console.log(opts);
    const popover = await this.popoverController.create({
      component: RouteDetailsPopoverComponent,
      componentProps: {
        viewType: this.viewType
      },
      event: opts.event
    });

    popover.onDidDismiss()
    .then((result) => {
      console.log(result['data']);
      this.viewType = result['data'];
    });

    return await popover.present();
}

And here's the popover component

changeRouteDetailView(mode: View) {
    this.viewType = mode;
    this.popCtrl.dismiss(this.viewType);
}

Without dismissing the popover, can I pass the data back?

Answer 1

Into the page you call the popover component, type this after 'create()' & 'present()' methods to use the popover:

const { data } = await popover.onDidDismiss();

'data' will storage the value you sent from popover component in the page you called the popover component.

At the same time, in the popover component you need to sent the data to the page. Use this line code inside the method you required to return from the popover:

this.popoverCtrl.dismiss({ data_you_sent });

This method, dismiss(), return data (in case you sent) and also close the popover.

Answer 2

create a global service， and inject it to the two components， passing data through the service

Answer 3

Use Observable to pass data back to parent without dismiss.

in SERVICE

dataBS: BehaviorSubject<any> = new BehaviorSubject(null);
dataObs = this.dataBS.asObservable();

in POPOVER

constructor(private dataSvc: DataService){}
sendToParent(val){
  this.dataSvc.dataBS.next(val);
}

in Parent Component

constructor(private dataSvc: DataService){}
listenForData(){
 this.dataSvc.dataObs.subscribe(passedVal => {
   console.log(passedVal) // THIS is your value from popover in your parent without dismiss
 })
}

ngOnInit(){
 this.listenForData();
}

Answer 4

this.popoverController.create({ component: RouteDetailsPopoverComponent, componentProps: { someSubject: this.subject },

this.subject.subscribe(...)

in POPOVER:

this.someSubject.next(..);

Answer 5

I am able to get the data onDismiss() but I would like to do it without exiting the popover.

Below is the code snippet I tried onDismiss() and it worked.

Do we any other popover methods or state changes that can be captured

Page i want the same page will you share your src code...? will you let me know the code where... changeRouteDetailView(mode: View) { this.viewType = mode; this.popCtrl.dismiss(this.viewType); }

Answer 6

On your popOver you can use:

this.viewCtrl.dismiss({ var1: "value" });

And in your page you can use popover.onDIdDismiss() event after present() to capture the data returned from the popover.:

await popover.onDidDismiss(data => {      
  if(data!=null){         
    console.log(data);
  }
});