CODEWITHSUNDEEP
popoverionic4
hugonne
hugonne

Reputation: 431

Dismiss Ionic 4 popover from its component

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.

Upvotes: 22

Views: 19617

Answers (2)

Денис
Денис

Reputation: 140

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();
}

Upvotes: 4

Ehsan K. harchegani
Ehsan K. harchegani

Reputation: 3128

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();
  }

Upvotes: 47

Related Questions