Pass data back on popover backdrop dismiss


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

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!


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?

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.onDidDismiss(data => {

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

Thank you!


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.


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

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.optionSubject =;

setOption() {[this.selectedOption]);


The calling page:

selector: ‘my-page’,
templateUrl: ‘my-page.html’
export class MyPage {
optionSubject:BehaviorSubject = new BehaviorSubject();

constructor(private _popoverController:PopoverController) {'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

        ev: event



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!

1 Like

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

1 Like

A nice tutorial on different ways to pass data:


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.