Is it feasible to return data when utilizing the ModalController in Ionic 5, specifically when executing a swipeToClose or backdropDismiss action?

With the latest update to Ionic 5's ModalController, a new feature allows users to swipe down on a modal to close it in addition to using the backdropDismiss parameter. Here is an example of how to enable this functionality:

const modal = await this.modalController.create({
  component: ModalPage,
  backdropDismiss: true, // <-- enable backdrop dismiss
  swipeToClose: true, // <-- enable swipe to close
  presentingElement: await this.modalController.getTop()
});
return await modal.present();

When a user triggers the swipeToClose or backdropDismiss events, is there a way to pass data back to the onWillDismiss() or onDidDismiss() events?

I know about the dismiss() method which can be used to send data back to the originating component programmatically. However, this method does not address passing data back when the swipeToClose or backdropDismiss events occur.

It might not be possible to achieve this directly, and I can think of a workaround if needed. But before doing that, I wanted to ask this question here first.

Answer №1

Recently, I encountered the same issue and managed to find a solution:

Imagine you have your Webpage, where you trigger the Modal:

this.modalController.create({
  component: ModalPage,
  backdropDismiss: true, // <-- enable backdrop dismiss
  swipeToClose: true, // <-- enable swipe to close
  presentingElement: await this.modalController.getTop()
}).then(modal => {
  modal.onWillDismiss().then(data => {
    console.log(data);
  });
  modal.present();
});

Next, you have your ModalPage. An Ionic Overlay automatically incorporates the Overlay within itself, so by simply adding

private modal: HTMLIonModalElement;
into the Modal, it becomes accessible. In the OnInit section, you can implement something like the following:

this.modal.onWillDismiss().then(data => {
  data.data = 'updated';
});

This action will take place before the one in your main Page, allowing you to alter the data and role smoothly 😊

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Where does tsc retrieve its definitions from when utilizing npm definitions?

After transitioning from using typings to just relying on npm, I noticed that the @types directory in node_modules is present, but there are no additional files required. Previously with typings, I always had to include the index.d.ts file within the typi ...

Discovering ways to align specific attributes of objects or target specific components within arrays

I am trying to compare objects with specific properties or arrays with certain elements using the following code snippet: However, I encountered a compilation error. Can anyone help me troubleshoot this issue? type Pos = [number, number] type STAR = &quo ...

React Routing: Unleashing the Power of Multi-Level Routing

In my quest to create a route with multiple levels (<Route path="/hello/world" element={<a>hello world</a>} />), I encountered a few issues. Here are the versions I am using: react: 18.1 react-router-dom: 6.3.0 Success with O ...

Implementing a custom overwrite function in TypeScript's inheritance

Below is a class that I have: export class RestService { private baseUrl: string; constructor(protected http: HttpClient) { this.baseUrl = environment.LOCAL_URL; } public get<T>(resource: string, params?: HttpParams): Observable< ...

The nz-switch function is malfunctioning as a result of an update that has affected its value

<form [formGroup]="businessFoodHygieneForm"> <div class="box p-4 d-flex jc-between ai-center"> <span> Food Hygiene Link </span> <label> <nz-switch class="switch- ...

Downloading PDF files on IOS while using Angular often results in the PDF opening in the same

I'm currently utilizing file-saver within my Angular application to retrieve a PDF generated from the backend. The library functions smoothly on desktop and Android devices, but I'm encountering issues with downloading files on iOS. Contrary to w ...

Expanding one type by utilizing it as an extension of another type

I am looking to create a custom object with predefined "base" properties, as well as additional properties. It is important for me to be able to export the type of this new object using the typeof keyword. I want to avoid having to define an interface for ...

Using NgRx to observe state changes in a service instead of relying on an Effect

Is it possible for a service to monitor state changes and make HTTP calls based on the state value without being triggered by an effect (NgRx)? In other words, can a service react to a portion of the store and eliminate the need for an effect to be involve ...

Navigating to a precise element within a page in Angular with flawless redirection

I recently encountered an issue where I had to add a span element with a specific ID in my HTML code to ensure that clicking on the Reply button would navigate to it. However, this modification was only necessary for the last element on the page. While the ...

Angular Leaflet area selection feature

Having an issue with the leaflet-area-select plugin in my Angular9 project. Whenever I try to call this.map.selectArea, VSCode gives me an error saying that property 'selectArea' does not exist on type 'Map'. How can I resolve this? I& ...

Comparing TypeScript's `return;` with `return undefined;`: which is better?

I encountered a strange behavior that is puzzling to me, and I'm not sure if there's a logical explanation for it. In TypeScript, the following code works perfectly: type UndefinedFunction = () => undefined; let uf: UndefinedFunction = funct ...

What does the 'key' parameter represent in the s3.put_object() function?

Currently, I'm utilizing Boto in my project to upload artifacts to an s3 bucket. However, I am uncertain about the usage of the Key parameter within the put_object() method: client.put_object( Body=open(artefact, 'rb'), Bucket=buc ...

Steps to deactivate an angular material component on version 2.0.0-beta.5

Recent updates have led to an error in my code: Error at /Users/asaylor/Desktop/RevenueIQ/website/aot/node_modules/@angular/material/typings/index.ngfactory.ts:4236:30: Property 'disabled' does not exist on type 'MdCheckbox' I am enc ...

Issue with Angular Routing not functioning properly when including an ID as a parameter in the URL

Just starting out with Angular and I'm currently working on my app.module.ts file. Here's what I have: RouterModule.forRoot() { ... { path : "posts/:id", component: PostprofileComponent }, { path : "p ...

Tips for implementing a cascading dropdown feature in Angular 7 Reactive Formarray: Ensuring saved data loads correctly in the UI form

I recently found a helpful guide on stackoverflow related to creating cascading dropdowns in an Angular reactive FormArray, you can check it out here After following the instructions, I managed to achieve my desired outcome. However, I now face a new chal ...

Function did not receive SQLite query result

My goal is to develop a storage service that utilizes a SQLite database to store key-value pairs and retrieve them based on the key. The code I have set up for this purpose is as follows: .service('StorageService', function($cordovaSQLite, $q) { ...

Optional parameters in typed languages can either have zero or all parameters provided

I am delving into the world of typed functional programming and have embarked on implementing partial application with a focus on type safety. Issue at hand: I'm aiming to create a function that can take a function along with zero or all of its param ...

The chart is experiencing difficulty printing as it tries to retrieve data from the JSON file

I am currently working on displaying a chart using JSON data, specifically the Volume Sales data stored in an array. JSON: { "year1": { "volumeSales": "0.09", "valueSales": "1.23" }, "year2": { "volumeSales": "0.11", "valueSales": " ...

Instead of relying on Vue TypeScript, we are leveraging IntelliJ with TypeScript 5.0.3 to compile our Vue project

My current version of IntelliJ IDEA is 2023.1 (Ultimate Edition) Build #IU-231.8109.175, released on March 28, 2023. I am facing an issue where my project fails to compile using "Vue TypeScript", resulting in some type mismatches being overlooked. In the ...

Extract Method Parameter Types in Typescript from a Generic Function

Can we retrieve the type of parameters of methods from a generic interface? For instance, if we have: interface Keys { create: any; ... } type MethodNames<T> = { [P in keyof Keys]: keyof T; } Then, is it feasible to obtain the type of paramete ...