# Pass data back on popover backdrop dismiss

**URL:** <https://forum.ionicframework.com/t/pass-data-back-on-popover-backdrop-dismiss/71942>\
**Category:** ionic-v3\
**Created:** [December 1, 2016, 10:47am UTC](https://forum.ionicframework.com/t/pass-data-back-on-popover-backdrop-dismiss/71942 "2016-12-01T10:47:14Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![rogermr](https://avatars.discourse-cdn.com/v4/letter/r/7cd45c/32.png) [@rogermr](https://forum.ionicframework.com/u/rogermr)\
**Post date:** [December 1, 2016, 10:47am UTC](https://forum.ionicframework.com/t/pass-data-back-on-popover-backdrop-dismiss/71942/1 "2016-12-01T10:47:14Z")

</div>

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 🙂

Thanks you!

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [December 1, 2016, 5:06pm UTC](https://forum.ionicframework.com/t/pass-data-back-on-popover-backdrop-dismiss/71942/2 "2016-12-01T17:06:43Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![rogermr](https://avatars.discourse-cdn.com/v4/letter/r/7cd45c/32.png) [@rogermr](https://forum.ionicframework.com/u/rogermr)\
**Post date:** [December 1, 2016, 6:12pm UTC](https://forum.ionicframework.com/t/pass-data-back-on-popover-backdrop-dismiss/71942/3 "2016-12-01T18:12:59Z")

</div>

Maybe I didn’t explain myself correctly 😕 , 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!

---

<div class="post-metadata">

**Author:** ![agates](https://avatars.discourse-cdn.com/v4/letter/a/3da27b/32.png) [@agates](https://forum.ionicframework.com/u/agates)\
**Post date:** [December 2, 2016, 10:17pm UTC](https://forum.ionicframework.com/t/pass-data-back-on-popover-backdrop-dismiss/71942/4 "2016-12-02T22:17:32Z")

</div>

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]

---

<div class="post-metadata">

**Author:** ![rogermr](https://avatars.discourse-cdn.com/v4/letter/r/7cd45c/32.png) [@rogermr](https://forum.ionicframework.com/u/rogermr)\
**Post date:** [December 4, 2016, 3:38am UTC](https://forum.ionicframework.com/t/pass-data-back-on-popover-backdrop-dismiss/71942/5 "2016-12-04T03:38:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![heykamok](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/heykamok/32/104933_2.png) [@heykamok](https://forum.ionicframework.com/u/heykamok)\
**Post date:** [March 22, 2017, 7:57pm UTC](https://forum.ionicframework.com/t/pass-data-back-on-popover-backdrop-dismiss/71942/6 "2017-03-22T19:57:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![uniphonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/uniphonic/32/108331_2.png) [@uniphonic](https://forum.ionicframework.com/u/uniphonic)\
**Post date:** [March 30, 2017, 3:13pm UTC](https://forum.ionicframework.com/t/pass-data-back-on-popover-backdrop-dismiss/71942/7 "2017-03-30T15:13:09Z")

</div>

A nice tutorial on different ways to pass data:

---

<div class="post-metadata">

**Author:** ![reality37](https://avatars.discourse-cdn.com/v4/letter/r/b77776/32.png) [@reality37](https://forum.ionicframework.com/u/reality37)\
**Post date:** [October 23, 2018, 5:04am UTC](https://forum.ionicframework.com/t/pass-data-back-on-popover-backdrop-dismiss/71942/8 "2018-10-23T05:04:29Z")

</div>

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.