Dismiss Ionic 4 popover from its component - popover

Question

I have a standard Ionic 4 page (Home) that creates a popover that uses a component (BusinessDetails) with a button that redirects to a new page (RequestTurn). However, when I click on that button, the popover is not dismissed and is renders on top of my RequestTurn page. I guess I need to manually dismiss it from the component (BusinessDetails), but I don't know how to access the instance of the popover from there, because it was created in the Home page. Is there a way to do this?
home.page.ts
presentModal(business:Business, event: Event) {
this.popoverController.create(({
component: BusinessDetailsComponent,
cssClass: "business-popover",
showBackdrop: true,
componentProps: {
business: business
}
}) as any).then(popover => popover.present()); }
business-detail.component.ts
goToRequestTurn(id: string) {
//Need to dismiss popver here (?)
this.router.navigateByUrl(`/request-turn/${id}`); }
Thanks for your help.

Answer 1

add private popoverController: PopoverController to the component constructor
then write a function like this and call it when you want to dismiss the modal
async DismissClick() {
await this.popoverController.dismiss();
}

Answer 2

I solved this problem as follows:
In parent component I have passed callback as prop to child component:
const popover = await this.popoverController.create({
component: PopoverComponent,
event: ev,
componentProps: {
onClick: () => {
popover.dismiss();
},
},
});
await popover.present();
And in PopoverComponent I have added #Input() onClick; which called when the user clicks:
...
#Input()
public onClick = () => {}
...
afterClick() {
this.onClick();
}