Ionic popover, set backdropDismiss to false on the popover component

I have a basic popover like this:

async openPopover(ev: Event) {
    const popover = await this.popoverController.create({
      component: PopoverPage,
      componentProps: {
        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:

      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?

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

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.

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';

  selector: 'app-tab2',
  templateUrl: '',
  styleUrls: [''],
export class Tab2Page {
  constructor(private popoverCtrl: PopoverController) {}

  async apiRequest() {
    const top = await this.popoverCtrl.getTop();
    top.backdropDismiss = false;
    console.log('cant dismiss');
    setTimeout(function () {
      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.