How can i retrieve data from a popover if I close it clicking outside it?

Ionic Framework
1

Hi everyone,
I need some help, how can i retrieve data from a popover if I close it clicking outside it? I’ve read in that The popover will dismiss when the backdrop is clicked by implicitly performing dismiss(null). How can I change it?
Thanks!

2

Well

What data do you want to consume?

I would have that data sent to the underlying component before - for instance via a service and a reactive store

3

For example,

userRol.component.html

<ion-list>
  <ion-item lines="none" *ngFor="let rol of roles">
    <ion-checkbox slot="start" [(ngModel)]="rol.checked" [checked]="rol.checked" ></ion-checkbox> 
    <ion-label>{{ rol.codRol}}</ion-label>
  </ion-item>
</ion-list>

users.component.ts

async openUserRolPopover(ev) {

    const popover = await this.popoverCtrl.create({
      component: UserRolComponent,
      event: ev,
      componentProps: {
        rol: this.user.rol,
      },
      backdropDismiss: true,
      translucent: true,
    });

    await popover.present();

    const { data } = await popover.onWillDismiss();
    if (data) {
      console.log(data);
    }
  }

As I told you I’ve read in that The popover will dismiss when the backdrop is clicked by implicitly performing dismiss(null), I’d like to do something like dismiss({ rolSel: rol }) instead

4

I would add an ionChange on the checkbox and through that capture the value and emit to whatever component that needs it.

Trying to capture the data via dismiss handler is not going to work on backdrop click - as you said.

As you are using Angular, your best bet is a service the popover uses to feed the value.

And the dismiss handler of the caller can then use the service to obtain the value.

Obivously you can also disable backdrop-dismiss

5

Use ngOnDestroy to emit and event or disable backdrop dismiss

7

Thanks a lot!
I already thought about using a service, but I also thought that there could be a better solutions.

8

Cool

I suggest to capture the click event and use event.detail.checked to communicate the value to the service

9

Thanks! I will keep investigating this solution, i have already tried to use similar methods like ionViewDidLeave or ionViewWillLeave.

10

I also want to know about it.