Pass data back on popover backdrop dismiss

Ionic Framework ionic-v3
1

Hello!

I was wondering what’s the best way to pass data to the previous page if the popover is dismissed via backdrop click.

Using
popover.onDidDismiss(data => {}); works well when dismissing the popover via function and calling dismiss(data);, but can’t figure it out on backdrop.

I know disabling backdrop click is an option, was wondering if there’s another way :slight_smile:

Thanks you!

2

Hmm, it seems to be fire for me when you tap the backdrop, at least in the nightly version.
What version of ionic-angular are you using?

3

Maybe I didn’t explain myself correctly :confused: , sorry!

It does fire, what I want to know is from the popover page, how can I pass data back so it’s received by the “onDidDismissData”

So if I have

let popover = this.popoverCtrl.create(TestPage, {}, {});
popover.present();
popover.onDidDismiss(data => {
}

How can I pass data back from TestPage if it the backdrop was tapped, since the .dismiss(); is called automatically.

Thank you!

4

I did something similar, recently. I ended up passing a BehaviorSubject by reference as a parameter to the popover. Here’s more or less what I came up with (untested, just copied hastily).

You could, alternatively, make a service to handle the data propagation.

Popover:

[code]import {Component} from ‘@angular/core’;
import {NavParams, ViewController} from ‘ionic-angular’;
import {BehaviorSubject} from “rxjs”;

@Component({
selector: ‘my-popover’,
template: <ion-item> <h2 item-left>Popover Options</h2> </ion-item> <ion-list radio-group [(ngModel)]="selectedOption" (ionChange)="setOption()"> <ion-item *ngFor="let optionKey of optionKeys"> <ion-label>{{optionKey}}</ion-label> <ion-radio [value]="optionKey"></ion-radio> </ion-item> </ion-list>
})
export class MyPopoverPage {
optionSubject: BehaviorSubject;

private options = {
    'Option 1': 'some data',
    'Option 2': 'more data'
};

public optionKeys: string[] = Object.keys(this.options);
public selectedOption: string;

constructor(private _navParams: NavParams,
            private _viewController: ViewController) {

}

ngOnInit() {
    if (this._navParams.data) {
        this.optionSubject = this._navParams.data.optionSubject;
    }
}

setOption() {
    this.optionSubject.next(this.options[this.selectedOption]);
    this._viewController.dismiss();
}

}[/code]

The calling page:

[code]@Component({
selector: ‘my-page’,
templateUrl: ‘my-page.html’
})
export class MyPage {
optionSubject:BehaviorSubject = new BehaviorSubject();

constructor(private _popoverController:PopoverController) {
    this.optionSubject.next('some data');
    
    // Do something with the subject whenever your options are emitted from the popover
    this.optionSubject.subscribe((option) => {
    	console.log("New option", option);
    });
}


showSortByPopover(event:Event) {
    let popover = this._popoverController.create(MyPopoverPage, {
        optionSubject: this.optionSubject
    });

    popover.present({
        ev: event
    });
}

}[/code]

5

Yep I see. Feels a bit too dependent (the popover shouldnt need to know anything about the parent), but it’s a working solution :slight_smile:
Thanks @agates!

6

This doesn’t feel like a good way to do it. Too clunky.

7

A nice tutorial on different ways to pass data:

8

This is the best solution I have found. Thank you very much.
Now, I can build search bar with pop over like google or another web in ionic.