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?

score 6 · Answer 1 · answered May 11 '20 at 14:52

6

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.

answered May 11 '20 at 14:52

Yair Abad

304
4
5

They specifically asked for a way to do it without dismissing the popover. – Cortney Thomas Mar 24 '21 at 16:59
Yep it's true. Probably the best way is https://stackoverflow.com/a/53491013/11794091 as zhimin answered in this topic. Anyway, I think is highly recommended uses onDidDismiss callback but it depends on what you need... – Yair Abad Mar 25 '21 at 14:36
thanks..it's working – Siddhartha Mukherjee Feb 11 '22 at 12:23

score 2 · Answer 2 · answered Nov 27 '18 at 00:19

2

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

answered Nov 27 '18 at 00:19

zhimin

2,740
12
22

score 2 · Answer 3 · answered Jul 25 '20 at 04:12

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();
}

score 1 · Answer 4 · answered Jan 04 '21 at 19:33

1

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

this.subject.subscribe(...)

in POPOVER:

this.someSubject.next(..);

answered Jan 04 '21 at 19:33

askona

390
1
5
16

score 0 · Answer 5 · answered May 16 '19 at 13:35

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); }

score -1 · Answer 6 · answered Jan 18 '21 at 23:31

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);
  }
});

Ionic 4 - Pass Data BACK from Popover without dismissing

6 Answers6