Dismiss Ionic 4 popover from its component
Solution 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();
}
Solution 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();
}
hugonne
Updated on June 07, 2022Comments
-
hugonne about 2 years
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.
-
hugonne over 5 yearsDo you mean "to the component constructor"? Because that's where I need to dismiss it from, but it looks to me like doing that will inject a new instance of the controller, so would not be dismissing the original one. I'll give it a try, anyway. Thanks.
-
Ehsan Kiani over 5 yearsyes the component constructor,sorry my mistake.let me know if you succeeded. good luck
-
hugonne over 5 yearsIt did work, thanks for the help. So, that means that the PopoverController you inject is actually a sinlgeton, correct? Otherwise, why would it close the instance injected to the constructor of the Home page?
-
user8462556 over 4 yearsWrong. you are taking input as 'onClick' and on 'afterClick' writing 'this.click()'
-
Денис over 4 yearsThank you, it helped me . Very strange, but the first time it did not work. When I tried this method after a while, it started working O_o
-
Juergen Riemer over 3 yearsKudos, very clever indeed!