diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md
index d266956fb7..63886f7e89 100644
--- a/core/src/components/modal/readme.md
+++ b/core/src/components/modal/readme.md
@@ -8,6 +8,51 @@ A Modal is a dialog that appears on top of the app's content, and must be dismis
Modals can be created using a [Modal Controller](../../modal-controller/ModalController). They can be customized by passing modal options in the modal controller's create method.
+### Passing paramaters
+
+When a modal is created, paramaters might be passed to the newly created modal:
+
+```ts
+// Create a modal using MyModalComponent with some initial data
+const modal = await modalController.create({
+ component: MyModalComponent,
+ componentProps: {
+ 'prop1': value,
+ 'prop2': value2
+ }
+});
+```
+
+Under the hood, the controller creates a new `ion-modal` and attaches the specified component to it.
+It also assigns the specified `componentProps` to the component's instance:
+
+```js
+// pseudo-code
+const instance = create(MyModalComponent);
+instance.prop1 = value;
+instance.prop2 = value2;
+```
+
+This way, your component can access the passed params, check the "Usage" section for further code example for each frameworks.
+
+
+### Retuning data
+
+Modals can also return data back to the controller when they are dismissed.
+
+```js
+const modal = await modalController.create({...});
+const { data } = await modal.onDidDismiss();
+console.log(data);
+```
+
+```js
+// Dismiss the top modal returning some data object
+modalController.dismiss({
+ 'result': value
+})
+```
+
@@ -38,41 +83,59 @@ export class ModalExample {
}
```
+```typescript
+import { Component } from '@angular/core';
+import { NavParams } from '@ionic/angular';
+
+@Component({
+ selector: 'modal-page',
+})
+export class ModalExample {
+
+ // "value" passed in componentProps
+ @Input() value: number;
+
+ constructor(navParams: NavParams) {
+ // componentProps can also be accessed at construction time using NavParams
+ }
+
+}
+```
+
### Javascript
+```html
+
+
+
+```
+
```javascript
+customElements.define('modal-page', class extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+ Super Modal
+
+
+
+ Content
+`;
+ }
+});
+
async function presentModal() {
// initialize controller
const modalController = document.querySelector('ion-modal-controller');
await modalController.componentOnReady();
- // create component to open
- const element = document.createElement('div');
- element.innerHTML = `
- <ion-header>
- <ion-toolbar>
- <ion-title>Super Modal</ion-title>
- </ion-toolbar>
- </ion-header>
- <ion-content>
- <h1>Content of doom</h1>
- <div>Here's some more content</div>
- <ion-button class="dismiss">Dismiss Modal</ion-button>
- </ion-content>
- `;
-
- // listen for close event
- const button = element.querySelector('ion-button');
- button.addEventListener('click', () => {
- modalController.dismiss();
- });
-
// present the modal
const modalElement = await modalController.create({
- component: element
+ component: 'modal-page'
});
- modalElement.present();
+ await modalElement.present();
}
```
diff --git a/core/src/components/modal/usage/angular.md b/core/src/components/modal/usage/angular.md
index f079c7e622..9c64048f44 100644
--- a/core/src/components/modal/usage/angular.md
+++ b/core/src/components/modal/usage/angular.md
@@ -19,3 +19,22 @@ export class ModalExample {
}
}
```
+
+```typescript
+import { Component } from '@angular/core';
+import { NavParams } from '@ionic/angular';
+
+@Component({
+ selector: 'modal-page',
+})
+export class ModalExample {
+
+ // "value" passed in componentProps
+ @Input() value: number;
+
+ constructor(navParams: NavParams) {
+ // componentProps can also be accessed at construction time using NavParams
+ }
+
+}
+```
diff --git a/core/src/components/modal/usage/javascript.md b/core/src/components/modal/usage/javascript.md
index d17264158a..01cbd160b0 100644
--- a/core/src/components/modal/usage/javascript.md
+++ b/core/src/components/modal/usage/javascript.md
@@ -1,34 +1,33 @@
+```html
+
+
+
+```
+
```javascript
+customElements.define('modal-page', class extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+ Super Modal
+
+
+
+ Content
+`;
+ }
+});
+
async function presentModal() {
// initialize controller
const modalController = document.querySelector('ion-modal-controller');
await modalController.componentOnReady();
- // create component to open
- const element = document.createElement('div');
- element.innerHTML = `
- <ion-header>
- <ion-toolbar>
- <ion-title>Super Modal</ion-title>
- </ion-toolbar>
- </ion-header>
- <ion-content>
- <h1>Content of doom</h1>
- <div>Here's some more content</div>
- <ion-button class="dismiss">Dismiss Modal</ion-button>
- </ion-content>
- `;
-
- // listen for close event
- const button = element.querySelector('ion-button');
- button.addEventListener('click', () => {
- modalController.dismiss();
- });
-
// present the modal
const modalElement = await modalController.create({
- component: element
+ component: 'modal-page'
});
- modalElement.present();
+ await modalElement.present();
}
```