Ionic 4: Popover opens on wrong Page

I’m creating a popover on one Page when clicking on a label. It should open there and it worked while using tabs as navigation. Now i changed the tab navigation from the tab.module to the app-routing.module, because I want the tabs to show on every page. Now when I’m clicking on the label (“bewertung”) to open the popover (“rateus”) it doesn’t show at the 5th tab (“more”), where it should open but when i navigate to the 1st tab (“home”) it is opened there and i cant interact with it.

more.page.ts

import { Component, OnInit } from '@angular/core';
import { ModalController, NavController, PopoverController } from '@ionic/angular'
import { RateusPage } from 'src/app/popover/rateus/rateus.page';

@Component({
  selector: 'app-more',
  templateUrl: './more.page.html',
  styleUrls: ['./more.page.scss'],
})
export class MorePage implements OnInit {

  constructor(
    private popoverController: PopoverController,
    private modalController: ModalController
  ) { }

  ngOnInit() {
  }

  async presentPopover() {
    console.log('I got clicked')
    const popover = await this.popoverController.create({
      component: RateusPage,
    });
    popover.present();
  }
}

rateus.page.html

<ion-item>
  <ion-label>
    Bewertung
  </ion-label>
</ion-item>
<ion-content padding>
  <ion-button expand="full" (click)=rateusDismiss()>Close</ion-button>
</ion-content>

rateus.page.ts

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

@Component({
  selector: 'app-rateus',
  templateUrl: './rateus.page.html',
  styleUrls: ['./rateus.page.scss'],
})
export class RateusPage implements OnInit {

  constructor(private popoverController: PopoverController) { }

  ngOnInit() {
  }

  rateusDismiss(){
    console.log("dismiss")
    this.popoverController.dismiss();
  }
}

Try passing the event argument to where you present your popover

(click)="presentPopover($event)"

Then change the method to pass the click event to the event property in the popover config

async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
        component: RateusPage,
        event: ev
});

Does this help?

1 Like

unfortunately no, is it possible that i messed something up with the routing so that all modals and popups open on the homepage? because i got the same problem with modals too

When you create a new “page” w the ionic cli, it programmatically adds the page as a new route to the app-routing. But since we are using it for a popover overlay, we don’t need to route to it, so you may want to check there and delete it from the array of routes.

Also, you could check to make sure that the PopoverPageModule is imported on the page you are calling it from and not globally on the app.module

When i import the PageModule, where do i need to use it? I thought that you only need to import the Page and not the Module. And I checked if there is any routing for the Page in the app routing module, it isn’t.

The popover module needs to be imported in the parent page module imports array.
Then in the parent page ts, you reference the popover component, as you have
Does that make sense? Or is that what you already have?