Ionic popover, set backdropDismiss to false on the popover component

Ionic Framework
1

I have a basic popover like this:

async openPopover(ev: Event) {
    const popover = await this.popoverController.create({
      component: PopoverPage,
      componentProps: {
        id: this.currentUser.id, 
        popoverController: this.popoverController
      },
      event: ev,
      backdropDismiss: true
    });

    return popover.present();
  }

The popover can be disabled by default. But within the popover there is an API request and when it is made it can take 2-5 seconds during which time I want set the backdropDissmiss to false. So I tried something like this on the PopoverPage:

constructor(
      private navParams: NavParams,
  ) {
	  this.pop = navParams.get('popoverController');
  }

delete() {
  this.pop.backdropDismiss = false;
  this.loading = true;
// Api request
}

But this seems to not affect the popover at all and the user can still dismiss it by clicking the backdrop. Is it there a way to set the backdropDismiss property from the popover page or is it not possible?

2

NavParams are not used with popover in v4/v5. Do you have an example in a demo put together?

3

I tried creating a demo here. But can’t figure out why it is coming out as undefined here when in my local setup, the console.log shows the popoverController.

4

Yeah, what you are trying to do is not correct.


  async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: Tab2Page,
      event: ev,
      popoverController: this.popoverController,
      backdropDismiss: true
    });
    return await popover.present();
  }

}

The popoverController is not valid in the signature here. Instead, just inject popoverController into the page

import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss'],
})
export class Tab2Page {
  constructor(private popoverCtrl: PopoverController) {}

  async apiRequest() {
    const top = await this.popoverCtrl.getTop();
    top.backdropDismiss = false;
    console.log('cant dismiss');
    setTimeout(function () {
      console.log('done');
      top.backdropDismiss = true;
    }, 5000);
  }
}

This would be the correct way to do things. getTop return the top-most popover, which is an element ref. Once you have that, you just toggle props on the component.

2 Likes